.: XHTML, CSS & JavaScript Gallery :.
/ * CSS: Horizontal Navigation Menu * \
/ * Using an Unordered List & No JavaScript * \
The XHTML for the bar above is as follows:
<div id="nav-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="current">Legal</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
The CSS for the bar above is as follows:
#nav-bar ul {
width:500px;
background:#465580 url(../wd-images/wd-ul.gif) repeat center center;
border:1px #0E1E5;
margin:auto;
padding:5px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-variant:small-caps;
font-size:1em;
font-weight:normal;
text-align:center;
color:#F8F1C3;
}
#nav-bar ul li {
display:inline;
}
#nav-bar ul li a {
font-weight:normal;
background:#465580 url(../wd-images/wd-ul.gif) repeat center center;
text-decoration:none;
color:#F8F1C3;
padding:5px;
border:1px solid #0E1E51;
}
#nav-bar ul li a:hover {
color:#000;
background:#465580 url(../wd-images/wd-bgcurrent.gif) repeat center center;
font-weight:normal;
padding:5px;}
#nav-bar ul li a.current {
color:#000;
background:#C3CBE0 url(../wd-images/wd-bgcurrent.gif) repeat center center;
font-weight:normal;
padding: 5px;
cursor: default;}
You will also need the two small images below to add the 3-D look to the bar:
Last updated:
© copyright:Wouter's Designs.
This document may not be translated, duplicated, redistributed or otherwise appropriated.