Monday, May 12, 2008

CSS Horizontal Menu with Submenu

I was playing with some CSS code over the weekend. My goal was to make a cross-browser compatible horizontally tabbed menu using HTML's unordered list tag. This concept has been beaten into the ground pretty well on the web, but none of the solutions I found fit my needs.

The code here has been successfully testing in Internet Explorer 6.0 and Mozilla Firefox 2.0. Notice I did not need to use CSS conditionals for IE compatibility. I though that was a nice touch :)



CSS Code:


#menu ul {
border-bottom: solid 1px #336699;
font: normal normal bold 14px verdana;
margin: 0;
margin-top: .1em;
padding: 4px 0; /* This typically corresponds to the padding-top value in '#menu li a' */
text-align: left;
}
#menu li {
list-style: none;
display: inline;
margin: 0;
}
#menu li a {
background: #EFEFEF;
border: solid 1px #336699;
border-bottom: none;
color: #336699;
margin-right: 0em;
padding: 4px 6px;
text-decoration: none;
}
#menu li a:hover {
background: #FFF;
}
#menu li a.last {
border-right: solid 1px #336699;
}
#menu li a.selected {
background: #FFF;
border-bottom: solid 1px #FFF;
}
#submenu ul {
height: 1em;
list-style: none;
padding: 3px 0;
margin: 0;
border-bottom: solid 1px #336699;
}
#submenu li {
display: inline;
}
#submenu li a {
float: left;
padding: 3px 7px;
margin: 0;
font: normal normal bold 10px verdana;
border-right: solid 1px #EEE;
color: #336699;
text-decoration: none;
}
#submenu li a:hover {
text-decoration: underline;
}
#submenu li a.last {
border-right: none;
}

HTML Code:


<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Client</a></li>
<li><a href="#">Download</a></li>
<li><a href="#" class="selected">Support</a></li>
<li><a href="#" class="last">Forum</a></li> </ul>
</div>
<div id="submenu">
<ul>
<li><a href="#">Live Chat</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#" class="last">Email</a></li>
</ul>
</div>

Consider this the base code. You can easily manipulate the functionality with PHP, C#, and JavaScript.

cssExample.html

5 comments:

  1. Thank you. Very very good!!!

    ReplyDelete
  2. put a sample plz

    ReplyDelete
  3. This sample is really good. But I dont know how can i SELECT menu item dynamically when clicked (after pageload).

    could you please give me a sample atleast with two web pages like 'home' and 'client'.

    thanks

    santosh

    ReplyDelete
  4. Can anyone tell me how ro make a second submenu?

    ReplyDelete
  5. you cannot change submenu onmouse click or onmousehover because these are just static.

    ReplyDelete