Home

CSS Examples CSS Drive horizontal menu buttons

Date: 09/12/2004 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.

#1: Asif Shahidullah on 10/24 at 08:35 AM

Is's amazing!

#2: Sergey Chooh on 11/09 at 04:15 PM

This CSS design is very usefull. This is very usefull for SEO. Thank you very much !

#3: CSS - XHTML design on 03/15 at 01:48 PM

How does one center this? It keeps going to the left no matter what I do.

#4: Vanessa on 03/17 at 02:34 PM

Nevermind.

Anyway - this doesn't appear to for for IE Mac.

#5: Vanessa on 03/17 at 05:25 PM

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.

#6: Sarah on 09/09 at 02:38 PM

an elegant use of css for maximum function!! great stuff!!

#7: bender on 11/30 at 05:12 PM

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/

#8: Jim S. on 11/30 at 07:54 PM

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><a onfocus="blur();" href="#">Find a Class</a></li>
<li><a onfocus="blur();" href="#">Studio Location</a></li>
<li><a onfocus="blur();" href="#">Register Online</a></li>
<li><a onfocus="blur();" href="/Jacksonville-Dance-Calendar/">Dance Calendar</a></li>
<li><a onfocus="blur();" href="/contact.cfm">Contact Us</a></li>
<li><a onfocus="blur();" href="#">For Parents</a></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/

#9: Jim S. on 03/27 at 10:51 PM

Very good, thanks for the code. Will be using this a lot!

#10: styts on 09/19 at 08:35 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

Hosting Coupon Code

Hostgator Hosting at $3.96/mon. Use CSS Drive exclusive coupon code "cssdrive25" for an additional 25% off

All images and content copyright © 2004-2014 CSS Drive. Contact Info | Back to Top