CSS Examples 
CSS Drive horizontal menu buttons
Author: CSS Drive
This is the same horizontal menu used here on CSS Drive. It dressed up regular <a> elements to be 2-state rollover menu buttons. The combination of "display: block" and "float: left" makes this possible.
The HTML:
<div class="hbuttons">
<a href="http://www.cssdrive.com">Home </a> <a
href="http://www.cssdrive.com/index.php/main/submit/">Submit </a> <a
href="http://www.cssdrive.com/index.php/main/resources/">Resources </a> <a
href="http://www.cssdrive.com/index.php/main/contact/">Contact </a>
</div>
<div style="clear: left;"></div>
The CSS:
.hbuttons a{
display: block;
text-decoration: none;
font: bold 13px Arial;
color: black;
width: 78px;
height: 23px;
float: left;
display: inline;
margin-right: 8px;
background-image:url(tabsquare.jpg);
background-repeat: no-repeat;
padding-top: 4px;
text-align:center;
}
.hbuttons a:hover{
background-image:url(tabsquareover.jpg);
}
The images:
Comments (18)
What can i say? This script is sheer poetry! Amazing, i really like it.
Is's amazing!
This CSS design is very usefull. This is very usefull for SEO. Thank you very much !
How does one center this? It keeps going to the left no matter what I do.
Nevermind.
Anyway - this doesn't appear to for for IE Mac.
I'm using this script w/ASP and I've run into a major problem. The links that are in the dropdown need to contain the value of a variable. I'm using Request.QueryString("category") to display specific information from a database based on this variable.
an elegant use of css for maximum function!! great stuff!!
This is a great example. However, when you get into 508/ADA compliance issues, hyperlinks must be separated by more than whitespace. One workaround is to put it in an unordered list and for the list items (li's) set them to display:inline. Not knocking it by any means, just wanted to point this out. :)
Jim S.
http://tentonweb.com/
Another twist on this technique is to use just 1 image... that image is all 3 possible states of the anchor tag (a,a:hover,a:active). See the top nav buttons at http://holliesdancindream.net/ to see what I mean... click on the "Contact Us"... What is involved is moving the 3 states around by positioning the background-image instead of calling additional images. Here is the 3-in-1 image used at Hollie's site: http://holliesdancindream.net/css/btnnav.jpg
-----------
The XHTML is an unordered list set to display:inline, with widths and heights defined to match the width/height of each background-image state.
-----------
The XHTML list - all in "off" state - the onfocus="blur();" removes the dotted line around anchor tags that IE gives us for free ;~):
-----------
<ul id="nav">
<li>Find a Class</li>
<li>Studio Location</li>
<li>Register Online</li>
<li>Dance Calendar</li>
<li>Contact Us</li>
<li>For Parents</li>
</ul>
-----------
For the "on" or "active" state - we apply the class to the <li> and remove the anchor tag (since we are on that page):
-----------
<li class="act">Contact Hollie</li>
-----------
And the CSS - the padding is applied to the anchor tag within the li tag to get the text just where we want it:
------------
ul#nav{
margin:0;
padding:0;
position:absolute;
top:9px;
right:10px;
text-align:center;
list-style-type:none;
width:720px;
}
ul#nav li{
display:block;
float:left;
width:120px;
height:33px;
margin:0;
padding:0;
}
ul#nav li a,ul#nav li a:visited{
display:block;
width:120px;
height:28px;
margin:0;
padding:5px 0 0 0;
text-decoration:none;
font:bold .78em/1em sans-serif;
color:#000;
background: #ccc url(/css/btnnav.jpg) 0 0;
}
ul#nav li a:hover{
padding:4px 0 0 0;
font:bold .78em/1em sans-serif;
color:#777;
background: #ccc url(/css/btnnav.jpg) 0 -33px;
}
ul#nav li.act{
font:bold .78em/1.5em sans-serif;
color:#009;
background: #ccc url(/css/btnnav.jpg) 0 -66px;
}
ul#nav li a:active{
color:#f0f;
background: #ccc url(/css/btnnav.jpg) 0 -66px;
}
------------
Thank you,
Jim S.
Jacksonville, Florida USA
http://tentonweb.com/
Very good, thanks for the code. Will be using this a lot!
