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

Join the conversation

Browse

Activity

Important Information