30 Exceptional CSS Navigation Techniques
We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS.
In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface.
1. The Menu menu
This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.
2. Pure CSS hover menu
In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.
3. Matte CSS Menu
Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.
4. CSS Blur Menu
This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.
5. CSS Navigation with Glowing Icons
This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.
6. CSS Sliding Door using only 1 image
This slick CSS menu is based on the Sliding Doors technique but only uses one image.
7. Navigation Matrix Reloaded
This stylish navigation menu technique uses a CSS sprite.
8. CSS Horizontal Menu
Ian Main provides a great set of free CSS menus that are stylish and easy to use.
9. Woody CSS Menu
Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.
10. Advanced CSS Menu
Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page.
11. Simple Yellow Tabbed
This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.
12. Vimeo-Like Top Navigation
This CSS-based navigation menu is based on the Vimeo primary menu.
13. Apple Like Colorful CSS Menu
Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page.
14. CSS Hoverbox
Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.
15. Big CSS Box
This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page.
16. Simple CSS-based drop-down menu
This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.
17. Two Level Horizontal Navigation in CSS
Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.
18. Uberlink CSS List Menus
This CSS navigation bar looks and behaves like an image-swapping menu.
19. CSS-Only Accordion Effect
In this technique, you’ll witness a method for creating a CSS-based accordion menu.
20. Tabbed Navigation Using CSS
Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.
21. CSS Mini Tabs (the UN-tab, tab)
This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).
22. Drop-Down Menus, Horizontal Style
This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.
23. List Into a Navigation Bar
Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.
24. CSS Tabs with Submenus
This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page.
25. CSS Block Navigation Menu
This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page.
26. XHTML & CSS Sprite Navigation
This stylish CSS sprite menu technique has three states: idle, hover, and clicked.
27. XHTML CSS Tabbed Menu
Learn how to create module tabs without the use of client-side scripting.
28. Cool, Simple, Horizontal CSS Menu
Learn to create a straightforward technique for creating a CSS based menu.
29. CSS Menu with Descriptions
This technique showcases a method for creating a menu that expands when hovered upon.
30. CSS Hover Button
Create CSS button-style navigation menu by checking out this excellent tutorial.
Related content
- Innovative (and Experimental) CSS Examples and Techniques
- CSS Tip #1: Resetting Your Styles with CSS Reset
- Structural Naming Convention in CSS
- Six Questions: Eric Meyer on CSS3
- Related category: CSS, Web Design
About the Author
.
63 Comments
aravind
April 16th, 2009
Great list!
Thanks for featuring my css menu tutorial.. :)
mbreti3gut
April 16th, 2009
good job
anonymous
April 16th, 2009
ack – link to The menu menu is 404.
Jacob Wyke
April 16th, 2009
Yeah awesome list of resources Kawsar! Perfect to send people learning CSS to – showing them just what CSS can do.
Martin Grandrath
April 16th, 2009
Really great list. Thanks!
Liam McCabe
April 16th, 2009
Some good stuff :)
Patternhead
April 16th, 2009
Great list, thanks.
Sebastiano
April 16th, 2009
Excellent list
smashill
April 16th, 2009
Exactly what I was looking for as I am just redesigning a page and look for a good, non java script navigation.
Michael Arnaldo
April 16th, 2009
Great stuff, I’ve always been amazed with Nick La’s technique .
Mike
April 16th, 2009
I don’t know that I’d include the CSS Blur Menu in here as exceptional. Essentially, you’re letting the coolness factor trump usability. You could just as easily use icons with no labels to match the blur experience.
I know, I know… you can still read most of the labels but, my point is, you should be able to read all the labels all the time.
jyoseph
April 16th, 2009
Yeah dude, nice to see some css menus. We all love jquery (a lot!) but sometimes it’s nice to get back to our roots with some pure css lovins.
Ryan Merket
April 16th, 2009
Wow. Love this list. Great job!
Wez
April 16th, 2009
Good list.
Jacob Gube
April 16th, 2009
@anonymous: It seems to work now give it another shot.
@jyoseph: I agree, but also want to mentions that a strong design would use progressive enhancement in that you can style your menus so that they degrade nicely if JS is turned off.
Vordreller
April 16th, 2009
Nice list, though I personnaly find the pure CSS hover menu a horrible idea.
anandarudra
April 16th, 2009
Really helpfull listing for quick reference.
Allie
April 16th, 2009
Great list! I love the blurring technique.
crvenk
April 17th, 2009
Good job! Meticulously done. Thanks.
Ganesh
April 17th, 2009
Nice tips !! Hope these menu contain tutorials !!!
Alex Mitchell
April 17th, 2009
Jacob, fantastic list and nice to see one of our own made the cut too; thank you for that. Some of these are new to me and some I’ve seen before, the CSS Blur Menu (#4) I’ve always liked anyway.
Thanks for sharing and keep up the great work!
Alex | @ZenElements
MarcoBarbosa
April 17th, 2009
Excellent!
Claire Web
April 17th, 2009
Thank you for sharing these designs. I know sometimes it can take a whilt to create a navigation in CSS that looks good, and this has sparked off some ideas for me, as well as having all the css resource i need for Web Design.
web Design
April 17th, 2009
Navigation simplified and made attractive.Wow CSS! and thanks Kawsar for this piece . It has enhanced my knowledge. Surely gonna use them in my design.
Swapan Kumar
April 17th, 2009
Good stuff…Keep it up
Jacob Gube
April 17th, 2009
@Alex Mitchell: Thanks for stopping by and well done on the CSS tutorial.
@Claire Web: Glad Kawsar’s post sparked some ideas for you!
alex
April 17th, 2009
Great selection. First one is my favorite!!
Janko
April 17th, 2009
Very nice list, some of them I haven’t seen before. I am glad that you included my tutorial in the list!
Thanks!
Mepho
April 17th, 2009
Great list I love the vimeo like navigation menu system, probably one of the more tricky ones when transparency is involved.
1. The Menu menu
The image link goes to a 404 error page fyi~
Thanks for sharing!
MorayWeb
April 19th, 2009
Great list thanks!
Pranav Prakash
April 19th, 2009
This collection is really nice. I will be using a couple of them in my upcoming project. Thanks :-)
Nic
April 19th, 2009
I always get confused as to why some of these are on lists like these. What is “exceptional” about #1? It’s an exceptional pain in the ass to use, but that’s it. Why have flyouts pop over other navigational elements?
justina
April 20th, 2009
thanks you for sharing! I am new in CSS and this will help me a lot
Marco
April 20th, 2009
Very good review and very helpful.
I want to report another type of horizontal menu based on Roger
Johansson menu.
Demo: http://www.nosoynadie.net/docs/menu_horizontal/doble_menu_horizontal.htm
How to: http://www.nosoynadie.net/articulos/menu-horizontal-basado-en-el-de-roger-johansson
Jacob Gube
April 20th, 2009
@Marco: Pretty great, thanks for taking the time to share that with all of us!
Joshua Parker
April 20th, 2009
The CSS Blur Menu is definitely my favorite.
shin
April 21st, 2009
CSS Blur menu makes me dizzy.Is it only me?
Frank J
April 22nd, 2009
Awesome inventory of fantastic CSS style navigation menus!
PelFusion
April 23rd, 2009
nice techniques
i liked Pure CSS hover menu (no.2)
Pranay
April 23rd, 2009
Good stuff.. I like it
Stephen Clark
April 26th, 2009
Here is a mash up I created a few years ago that builds on Simplebits/Dan Cederholm’s Mini Tabs navigation. Its CSS driven but the tab slides between the navigation selectors via a small javascript.
http://www.sgclark.com/sandbox/miislide
- Stephen
Kevin
April 27th, 2009
Great resource. Thanks for saving us all a lot of time!
ravindra
April 28th, 2009
great list but you miss the cssplay.co.uk site css menus they have 1000 of unique css menus
redips
April 28th, 2009
Nice collection. This will certainly save my time.
Thank you!
Andreas Blixt
May 6th, 2009
Hey! I noticed a small burst to the traffic on my old article (#20, Tabbed Navigation Using CSS) from this page. Thanks for the mention! =)
I’d just like to say that the article has been updated and that the new version is available here:
http://blixt.org/articles/tabbed-navigation-using-css
isaac
May 12th, 2009
Nice one.
The use of empty tags on #6 is not so elegant…
francis
May 25th, 2009
amzing
Fred Campbell
May 26th, 2009
Great list! Some I knew, quite a few I didn’t, but will be giving them a try over the coming months. Page bookmarked and Tweeted! Thanks.
paolo
June 11th, 2009
I need to learn all of this! Thanks!
bryanregencia.com
June 22nd, 2009
Good stuffs! Thanks for sharing.
Sam
June 26th, 2009
Thanks a lot, some of these techniques will be very handy when I redesign my site!
temizlik
June 27th, 2009
Good stuffs! Thanks for sharing
Matty
August 19th, 2009
Really like the CSS Blur Menu this would really help to communicate designer to my sites visitors. Will have to look more into this one. Thank you for sharing the excellent post.
Cara Dixon
October 14th, 2009
This is a great list – thanks for sharing! I’m sure the resources featured will prove useful for web designing in the future.
Phil
November 9th, 2009
I love the blur effect. But overall, great post.
KntL
November 9th, 2009
hi, i have a css navigation bar with tooltip and maybe you are interested in it. its difference from others is no requirement of javascript, jquery or any image. you can check it on my blog:
http://kntl.org/css-imageless-but-cool-javascript-and-jquery
thank you…
Lyons
December 19th, 2009
I wonder where those skeptics of CSS are now a days. Remember those comments people used to make about CSS?
Amy
January 3rd, 2010
Great resource – thanks so much!
Deepu Balan
January 3rd, 2010
Really Useful list… Luv the 4th one, css blur menu is really amazing. Thanks for sharing…
-Deepu
Patrick
January 3rd, 2010
I’m sorry, but most of these simply don’t justify the word ‘exceptional’. Most are very ordinary. Why does every list-style post have to have a word like exceptional in it?
WebCatch
February 10th, 2010
Many thanks for the great article! Some great tips. Well worth a bookmark.
KM
February 27th, 2010
As a web designer, I am always looking for examples and inspiration for new types of menus on my projects. This is by far one of the best collections I have come across. I have bookmarked this list and use it from time to time.
masterGOmaster
March 3rd, 2010
This is a very complete collection and I will choose one. thank you
Leave a Comment