Following example how to create navigation horizontal menu, with following features:
- menu items have horizontal sub-menus with one row
- menu item for current page is highlighted
- sub-menu for current page is always shown, except when overlapped with sub-menu from hovered menu item
- sub-menus for hovered items are automatically hidden when hover is moved to another item, except for sub-menu for current page
Picture 1
Full CSS code is given below:
html
{
min-width: 600px;
}
body, div, td, th, h2, h3, h4
{
font-family: verdana,sans-serif;
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
color: #030303;
}
div
{
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font-family: verdana,geneva,arial,helvetica,sans-serif;
font-size: 14px;
font-weight: normal;
color: #030303;
}
p.note
{
background: #E0E0E0;
padding: 4px;
font-family: tahoma;
font-size: 85%;
line-height: 130%;
margin-top: 0;
}
#contents
{
border: 2px solid #000000;
padding: 15px;
background: #D0D0D0;
min-height: 300px;
}
#ulNav
{
position: relative;
display: block;
height: 28px;
width: 100%;
background: #224D6F;
/*background: url(../images/menu-bg.gif) top left repeat-x;*/
margin: 0;
padding: 0;
}
#ulNav li ul
{
display: block;
}
#ulNav a
{
text-decoration: none;
}
#ulNav li
{
margin: 0;
float: left;
display: block;
padding-right: 15px;
text-align: center;
line-height: 28px;
}
#ulNav li ul
{
display: none;
}
#ulNav li.off ul, #ulNav li.on ul
{
position: absolute;
top: 25px;
left: 0;
background: #224D6F;
/*background:url(../images/menu-bg.gif) top left repeat-x;*/
height: 28px;
width: 100%;
margin: 0;
padding: 0;
}
#ulNav li.on ul
{
background: #224D6F;
/*background:url(../images/menu-bg.gif) top left repeat-x;*/
width: 100%;
margin: 0;
padding: 0;
}
#ulNav li.on:hover ul, #ulNav li.over ul /*for ie*/
{
background: #224D6F;
/*background:url(../images/menu-bg.gif) top left repeat-x;*/
width: 100%;
}
#ulNav li a
{
color: #FFFFFF;
font-weight: bold;
display: block;
width: 93px;
padding: 0;
}
#ulNav li.on a
{
color: #FF6A00;
}
#ulNav li.on ul a, #ulNav li.off ul a
{
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #FF6A00;
width: 100%;
margin: 0;
padding: 0;
}
#ulNav li.on:hover ul a, #ulNav li.over ul li a /*for ie - the specificity is necessary*/
{
background: #224D6F;
/*background: url(../images/menu-bg.gif) top left repeat-x;*/
}
#ulNav li.on ul
{
display: block;
}
#ulNav li.off:hover ul, #ulNav li.over ul
{
display: block;
z-index: 6000;
}
#ulNav li.off a:hover, #ulNav li.on a:hover
{
color: #FF6A00;
}
#ulNav li span
{
position: absolute;
}
#liSubnav a
{
display: block;
position: relative;
height: 28px;
}
#ulNav li.off ul a, #ulNav li.on ul a
{
display: block;
background: #224D6F;
/*background: url(../images/menu-bg.gif) top left repeat-x;*/
color: #FFFFFF;
font-family: arial, verdana, sans-serif;
font-size: small;
margin: 0;
padding: 0;
padding-left: 10px;
}
#ulNav li.on ul a
{
background: #224D6F;
/*background: url(../images/menu-bg.gif) top left repeat-x;*/
margin: 0;
padding: 0;
padding-left: 10px;
}
Apply CSS in your web page code, for all pages. For current page, set href="#" id="current". For given snapshots, HTML code looks like this:
<div>
<ul id="ulNav">
<li id="liSubnav" class="off"><a href="Home.aspx">Home</a></li>
<li id="liSubnav" class="off"><a href="Services.aspx">Services</a>
<ul>
<li><a href="#">Finance</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Shopping</a></li>
</ul>
</li>
<li id="liSubnav" class="on"><a href="#" id="current">Community</a>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Forum</a></li>
</ul>
</li>
<li id="liSubnav" class="off"><a href="About.aspx">About</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Careers</a></li>
</ul>
</li>
<li id="liSubnav" class="off"><a href="Contact.aspx">Contact</a></li>
</ul>
</div>
If you like to have modern look, with gradient menu items, use background image, instead of simple color. Image in Picture 2 could be used to get look from Picture 3:
Picture 2
Picture 3
To achieve this, put background image to img (or any other) sub-folder in your project. In all #ulNav sections, replace background: #224D6F; with background: url(../images/menu-bg.gif) top left repeat-x;.
