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

XML, Perl, Python, and other languages can be discussed here, even if it isn't PHP (We might forgive you).

Moderator: General Moderators

Post Reply
grantp22
Forum Newbie
Posts: 24
Joined: Tue Sep 15, 2009 9:34 pm

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

Post 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;
}
 
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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).
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
grantp22
Forum Newbie
Posts: 24
Joined: Tue Sep 15, 2009 9:34 pm

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

Post 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
victor87
Forum Newbie
Posts: 2
Joined: Sun Mar 07, 2010 9:23 pm

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

Post 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.
Post Reply