multi layered menu

hyster · September 5, 2010

hi guys.

ive spent the last few days trying to get a multi layered css menu done. ive been unsuccsesful so i could do with some help.

ive only manged to get a 2 level menu.

ive downloaded loads of scripts that do what i want but i can not pick apart the code to change mine.

im doing an intranet site for work and we only use ie8 so im not worried about cross browser conpaitabilty.

i intend to use this script as an included header for othe pages so i do not have to change every page as i go along.

any suggestions on the look would be gratefully appreciated as well.

ive attached the full site files if needed.

thanks for any help.

html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DSGI Line</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

</head>
<body>
<div id="header-wrap">
  <div id="header"><img src="images/logo2.png" name="logo" width="225" height="57" class="logo" id="logo" />
  	
    <ul class="menu">

      <!-- Begin Simple Item Without Drop -->
      <li class="drop">
      	<a href="#">Intranet</a>
      </li>
      <!-- End Simple Item Without Drop -->
      
      <!-- Begin Item With Drop -->
      <li class="drop">
      	<a href="#">Sections</a>
   	
       <!-- Begin Sub-Menu -->
        <ul>
          <li><a href="#">De-Trash</a></li>
                   
          <li><a href="#">Vmi</a></li>
          <li><a href="#">Test</a></li>
          <li><a href="#">Repair</a></li>
          <li><a href="#">Parts Ordering</a></li>
          <li><a href="#">Blank & Imaging</a></li>
          <li><a href="#">Repairs</a></li>
          <li><a href="#">Kitting</a></li>
          <li><a href="#">OBA</a></li>
        </ul>
        <!-- End Sub-Menu -->
          <!-- Begin Item With Drop -->
      
      
      <li class="drop">
      	<a href="#">Training</a>
        <ul>
          <li><a href="#">Docs</a></li>
          <li><a href="#">Forum</a></li>              
          <li><a href="#">Other</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

css code

html, body {
margin:0;
padding:0;
text-align:center;
font-size:1em;
font-family:verdana, arial, helvetica, sans-serif;
height:100%;
background: url(images/bg.png) repeat;
}
a {
-moz-outline:none;
color:#36c;
}
a img {
border:0;
}
a:hover {
text-decoration:none;
}
a:active {
outline:none;
}

#header-wrap {
display:block;
position:relative;
width:100%;
margin:0 auto;
padding:0;
text-align:left;
background: url(images/b.gif) repeat-x top left;
}


#header {
height: 90px;
width: 100%;
padding:0;
position:relative;
margin:0 auto;
display:block;
}


/*  ------------------------------  */
/*  DROPDOWN MENU                   */
/*  ------------------------------  */
ul.menu {
list-style-type:none;
margin:0;
padding:6px 0 0 6px;
float: right;
padding-right: 100px;
}
.logo {
padding-top: 15px;
padding-left: 100px;


}

ul.menu li {
display:block;
float:left;
position:relative;
margin:0 0px 0 0;
padding:0;
-khtml-opacity: 0.75;      /* khtml, old safari */
-moz-opacity: 0.75;       /* mozilla, netscape */
opacity: 0.75;           /* fx, safari, opera */
padding-top: 30px;
}
ul.menu li.current {
background:blue;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
ul.menu li:hover {
-moz-border-radius:0px;
-webkit-border-radius:4px;
}


ul.menu li a {
display:block;
float:left;
color:#FFF;
text-decoration:none;
font-size:18px;
font-style:normal;
font-weight:bold;
font-family:arial, helvetica, sans-serif;
line-height:18px;
padding-left: 10px;
}

ul.menu li a span {
font-weight:normal;
padding-left:0px;
}
ul.menu li.drop a {
padding-right:7px;
}
ul.menu li.drop:hover li {
border:none;
}
ul.menu li.drop span.toggle {
display:block;
float:left;
width:21px;
height:10px;
background:transparent url("images/t1oggle.png") no-repeat 0 -20px;
padding:0;
margin:0 8px 0 0;
}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle {
background-position:1px 5px;
}
ul.menu li.drop:hover, ul.menu li.current:hover {
-moz-border-radius:0;
-webkit-border-radius:0;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
}
ul.menu li.drop:hover ul {
display:block;
z-index:1;
padding-bottom:8px;
}
ul.menu li ul {
display:none;
position:absolute;
width: 100%;
top:10px;
left:0;
list-style-type:none;
margin:0;
padding:9px 0 0 0;
background:#0a90d3;
filter: alpha(opacity=75); /* internet explorer */
}
ul.menu li ul li {
float:none;
height: auto;
margin:0;
padding:0;
border:none;
filter: alpha(opacity=100); /* internet explorer */
}
ul.menu li ul li a {
float:none;
background:none;
margin:0;
padding:0;
display:block;
font-size:13px;
height:auto;
margin:0;
padding:4px 13px 4px 13px;
font-weight:normal;
}

/* drop down menu hover styles */
ul.menu li:hover ul {
border:none;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
ul.menu li:hover ul * {
background:none;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul.menu li ul li:hover {
background-color:#333333;
}

[attachment deleted by admin]

hyster · September 7, 2010

i used a diffrent method.

Sign In

multi layered menu

Recommended Posts

hyster

Link to comment

Share on other sites

hyster

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information