Pure CSS rollover menu
Pure CSS Menu - light, fast, easy to make, SEO Friendly
This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus.
There is no javascript, and beneath it is valid XHTML code, so you don't need to worry about SEO performance.
Example
How to make your own
Ok, here is how you make this kind of menu - it's actually really simple:
First you must make your background image:
Please note that this is one image, and not two separate images.
If your menu is 400px by 50px background image should be 400px by 100px. Upper half of picture is background for normal state, and lower half is for rollover.
HTML Code
<div id="main-nav"> <ul> <li><a href="#" class="home"><span>Home</span></a></li> <li><a href="#" class="about"><span>About us</span></a></li> <li><a href="#" class="faq"><span>F.A.Q.</span></a></li> <li><a href="#" class="contact"><span>Contact</span></a></li> </ul> </div>
Now apply this CSS code, and there you have it - pure css rollover menu.
on April 11th, 2007 at 1:45 pm
This is the exact menu I want, but I can never find one like this that has drop-downs with it...do you know where I can find one?
Any help would be greatly appreciated.
Thanks!
George
on April 11th, 2007 at 2:30 pm
Why do you use class="home" instead of id="home", class ="about" insted of id="about" ? IMHO it'd be beter to use id, because there is only one "home", one "about".
on April 11th, 2007 at 2:43 pm
Heh, you got me there
Well, there is no particular reason, I guess that is easier for me to write:
#main-nav ul li a.home:hover
than
#main-nav ul li a#home:hover
Your comment makes sense - IDs might be a better solution. But in this particular example there is no big difference.
On the other hand if you go with IDs instad of class it might be a good idea to name them id="nav-home" and "nav-about" - so you can save "home" and "about" IDs for something more important on your page
on April 11th, 2007 at 2:59 pm
Good
You might want to add rel="home" to the home link, to make it Microformats-friendly
See http://microformats.org/wiki/rel-home for details.
on April 11th, 2007 at 4:55 pm
George: Take a look a Stu Nicholls site (http://www.cssplay.co.uk/) there's quite a few CSS only drop-down menus on there.
on April 11th, 2007 at 6:00 pm
Good menu example. I don't like how the anchor text is being hidden in favor for images.
It is not good inmho for 2 reasons:
1. SEO
2. Accessibilty
hiding the text and relying on images will not help Search Engine Optimization and will prevent anyone from using a screen reader and/or a browser that doesn't support image links from navigating the menu.
The same thing can be accomplished without using image based text.
on April 11th, 2007 at 6:30 pm
@john, you are right, but only on some topics
- google will index this menu.
-"The same thing can be accomplished without using image based text."
Except when designer gives you site design that doesn't use default fonts. (in my example Myriad Pro).
Similar thing can be accomplished, but not the same.
-Accessibility: yes this might be an issue
on April 11th, 2007 at 9:31 pm
When I tried this on Firefox, the menu did not look right.
IE works fine though.
on May 28th, 2007 at 9:27 pm
I'd like to expand on this nav bar and be able to also swap out images in a separate
on August 21st, 2007 at 5:52 am
Check out this menu generator:
www.cssmenumaker.com
on November 7th, 2007 at 6:06 pm
Nemedowtren
on January 4th, 2008 at 6:17 pm
What if the buttons are different sizes like in my situation?
How do I overcome this?
for eg.
I have 5 buttons which need a css rollover.
first button's width is 84px
2nd: 63px
3rd: 57px
4th: 70px
5th: 75px
on January 16th, 2008 at 1:44 am
Great job.
on March 7th, 2008 at 3:17 pm
Is it possible to set one of the menu rollover as selected?
i want to show the rollover image when the user is on the same page
on March 10th, 2008 at 6:05 pm
cool.
I second the Itai request: is there a way to keep a button highlighted to give the user a visual feedback about what page is visiting?
on May 1st, 2008 at 2:19 am
This tutorial is great! How do I go about creating this menu which lines up vertically rather than horizontally?
on May 25th, 2008 at 3:48 am
wow, this tutorial is a great one, i haven't got any tutorial like this one, usually they just used the text above the bg, and also they just gradient background
on July 14th, 2008 at 8:50 pm
This is a great tutorial! Though I was wondering if there was a way to have the button of the current page highlighted. I tried messing with the css, but I couldn't get it to work.
on March 10th, 2009 at 4:40 pm
Thank you for your help!
on April 15th, 2009 at 2:00 pm
If you ever want to hear a reader's feedback
, I rate this article for 4/5. Decent info, but I just have to go to that damn msn to find the missed bits. Thanks, anyway!
on May 14th, 2009 at 3:45 am
Thank You! I am in the learning process and having a hard time with CSS and JavaScript. I appreciate that you took the time to publish this. I used it and works and looks good too ~ God Bless
on June 13th, 2009 at 7:18 pm
This menu worked great for me. Is it just as easy to make the same kind of menu only vertical?
Leave a Reply (English only)