Page 1 of 1

CSS Horizontal Menu full code (incl) Need help with submenus

Posted: Mon Jan 25, 2010 3:26 pm
by grantp22
The code that follows produces the following menu:
Image

The menu works great but I cannot figure out how to add dropdown/submenus as shown in the next graphic where I have added in submenus using a graphics editor:
Image

Could somebody please help me to modify the css and html to allow submenus as shown in he second graphic! Any help will be much appreciated and I am sure others will find this menu useful

Thanks in advance

Here is the HTML I'm using:

Code: Select all

<html>
<head>
  <link href="template/css/menu_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<div class="menu metallic horizontal grey"> 
 <ul>
  <li><span><a><span></a></span></span></li>
  <li><span class="menu_a"><a href="index.php" target="_self"><span class="menu_a"><font color="#C5C5C5">HOME</font></span></a></span></li>
  <li><span class="menu_a"><a href="userinfo.php?user=Grant"><span class="menu_a">MY ACCOUNT</span></a></span></li>
  <li><span class="menu_a"><a href="useredit.php"><span class="menu_a">EDIT ACCOUNT</span></a></span></li>
  <li><span class="menu_a"><a href="admin.php"><span class="menu_a">ADMIN</span></a></span></li>
  <li><span class="menu_a"><a href="process.php"><span class="menu_a">LOGOUT</span></a></span></li>
  <li><span class="menu_a"><a href="register.php"><span class="menu_a">REGISTER</span></a></span><br/ ></li>
 </ul>
</div>
 
</body>
</html>
Here is the CSS code for the menu - menu_style.css:

Code: Select all

.clearit {
    margin: 0;
    padding: 0;
    height: 0;
    clear: both;
}
 
/* METALLIC HORIZONTAL MENU */
 
.metallic.horizontal {
    width: 100%;
    height: 27px;
    margin: 0;
    padding: 0;
    background: transparent url(images/menubar.gif) top left repeat-x;
}
 
.metallic.horizontal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.metallic.horizontal ul li {
    float: left;
    margin: 0;
    padding: 0;
}
 
.metallic.horizontal ul li a {
    display: block;
    height: 27px;
    padding-left: 12px;
    float: left;
    text-transform: uppercase;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #FFFFFF;
    background: transparent url() top right no-repeat;
    text-decoration: none;
    outline:none;
}
 
.metallic.horizontal ul li a span.menu_a {
    display: block;
    float: left;
    height: 22px;
    padding-top: 7px;
    padding-right: 12px;
    background: transparent url() top right no-repeat;
    cursor: pointer;
}
 
/* END METALLIC HORIZONTAL MENU */
 
/* GREY HOVER */
.metallic.grey ul li a:hover,
.metallic.grey ul li.highlight a {
    background: transparent url(images/menubarover.gif) top left no-repeat;
    color: #58B0D4;
}
 
.metallic.grey ul li a:hover span.menu_a,
.metallic.grey ul li.highlight a span.menu_a {
    background: transparent url(images/menubarover.gif) top right no-repeat;
    color: #FB6900;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 

Re: CSS Horizontal Menu full code (incl) Need help with submenus

Posted: Mon Jan 25, 2010 5:28 pm
by pickle
Without getting into the details of alignment & layout(because I hate implementing stuff like this - it's cool, but a real pain to get just right), how it generally works is the sub menu is a <ul> inside the <li>that surrounds the "MY ACCOUNT" link. By default the <ul> is set to "display:none;". Then, when the <li> is hovered over, the <ul> is set to "display:block". Modern browsers can handle this just with these 2 CSS rules:

Code: Select all

#whatever-your-wrapper-id-is li ul{ display:none; }
#whatever-your-wrapper-id-is li:hover ul{ display:block; }
You'll need Javascript to duplicate that functionality in IE6 (and possibly IE7).

Re: CSS Horizontal Menu full code (incl) Need help with submenus

Posted: Wed Jan 27, 2010 6:36 am
by grantp22
Hi, I have taken pickles advise and help from others, but I still can't get this to work, on mouse over the dropdown menu does not appear and behaves the same as the original code I posted. this is what I have changed the code to:

Here is the HTML:

Code: Select all

<html>
<head>
  <link href="template/css/menu_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu metallic horizontal grey">
  <ul>
  <li><span><a><span></a></span></span></li>
  <li><span class="menu_a"><a href="index.php" target="_self"><span class="menu_a"><font color="#C5C5C5">HOME</font></span></a></span></li>
  <li><span class="menu_a"><a href="userinfo.php?user=Grant"><span class="menu_a">MY ACCOUNT</span></a></span>
  <ul>
        <li><a href="#">Sub Menu 1</a></li>
        <li><a href="#">Sub Menu 2</a></li>
  </ul>
  </li>
  <li><span class="menu_a"><a href="useredit.php"><span class="menu_a">EDIT ACCOUNT</span></a></span></li>
  <li><span class="menu_a"><a href="admin.php"><span class="menu_a">ADMIN</span></a></span></li>
  <li><span class="menu_a"><a href="process.php"><span class="menu_a">LOGOUT</span></a></span></li>
  <li><span class="menu_a"><a href="register.php"><span class="menu_a">REGISTER</span></a></span><br/ ></li>
 </ul>
</div>
</body>
</html>
And CSS:

Code: Select all

.clearit {
         margin: 0;
         padding: 0;
         height: 0;
         clear: both;
}
/* METALLIC HORIZONTAL MENU */
.metallic.horizontal {
          width: 100%;
          height: 27px;
          margin: 0;
          padding: 0;
          background: transparent url(images/menubar.gif) top left repeat-x;
}.metallic.horizontal ul {
          list-style: none;
          margin: 0;
          padding: 0;
}
.metallic.horizontal ul li {
          float: left;
          margin: 0;
          padding: 0;
}
.metallic.horizontal ul li a {
          display: block;
          height: 27px;
          padding-left: 12px;
          float: left;
          text-transform: uppercase;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 80%;
          color: #FFFFFF;
          background: transparent url() top right no-repeat;
          text-decoration: none;
          outline:none;
}
.metallic.horizontal ul li a span.menu_a {
          display: block;
          float: left;
          height: 22px;
          padding-top: 7px;
          padding-right: 12px;
          background: transparent url() top right no-repeat;
          cursor: pointer;
}
.metalic.horizontal ul li ul {
          display:none;
          position:absolute;
          margin-top:27px;
}
.metalic.horizontal ul li ul li a {
          display:block;
          background:url('your image');
          height:27px;
          width:auto;
          line-height:27px;
          text-align:center;
}
.metalic.horizontal ul li:hover ul {
          display:block;
}
 
/* END METALLIC HORIZONTAL MENU */
/* GREY HOVER */
.metallic.grey ul li a:hover,
.metallic.grey ul li.highlight a {
          background: transparent url(images/menubarover.gif) top left no-repeat;
          color: #58B0D4;
}
.metallic.grey ul li a:hover span.menu_a,
.metallic.grey ul li.highlight a span.menu_a {
          background: transparent url(images/menubarover.gif) top right no-repeat;
          color: #FB6900;
          font-family: Verdana, Arial, Helvetica, sans-serif;
}
Any ideas
Grant

Re: CSS Horizontal Menu full code (incl) Need help with submenus

Posted: Thu Mar 18, 2010 8:59 am
by victor87
please have a look at http://www.cssplay.co.uk

this is possibly the best resource for css navigation and many other things css.
to top that off, a lot of the examples provided on the website will work in ie6 and up without any additional js.