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.
- CSS menu file: menu.css
- Sample HTML: cssExample.html
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
Thank you. Very very good!!!
ReplyDeleteput a sample plz
ReplyDeleteThis sample is really good. But I dont know how can i SELECT menu item dynamically when clicked (after pageload).
ReplyDeletecould you please give me a sample atleast with two web pages like 'home' and 'client'.
thanks
santosh
Can anyone tell me how ro make a second submenu?
ReplyDeleteyou cannot change submenu onmouse click or onmousehover because these are just static.
ReplyDelete