30 Exceptional CSS Navigation Techniques

Apr 16 2009 by Kawsar Ali | 103 Comments

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

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

Pure CSS hover menuView Demo

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 CSSView Demo

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

CSS Blur MenuView Demo

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

CSS Navigation with Glowing IconsView Demo

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

CSS Sliding Door using only 1 imageView Demo

This slick CSS menu is based on the Sliding Doors technique but only uses one image.

7. Navigation Matrix Reloaded

Navigation Matrix ReloadedView Demo

This stylish navigation menu technique uses a CSS sprite.

8. CSS Horizontal Menu

CSS Horizontal MenuView Demo

Update: this no longer exists. Ian Main provides a great set of free CSS menus that are stylish and easy to use.

9. Woody CSS Menu

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

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

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

Vimeo-Like Top NavigationView Demo

This CSS-based navigation menu is based on the Vimeo primary menu.

13. Apple Like Colorful CSS Menu

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

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

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

Simple CSS-based drop-down menuView Demo

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

Two Level Horizontal Navigation in CSSView Demo

Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

18. Uberlink CSS List Menus

Uberlink CSS List MenusView Demo

This CSS navigation bar looks and behaves like an image-swapping menu.

19. CSS-Only Accordion Effect

CSS-Only Accordion EffectView Demo

In this technique, you’ll witness a method for creating a CSS-based accordion menu.

20. Tabbed Navigation Using CSS

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)

CSS Mini Tabs (the UN-tab, tab)View Demo

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

Drop-Down Menus, Horizontal StyleView Demo

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

List Into a Navigation BarView Demo

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

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

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

XHTML & CSS Sprite NavigationView Demo

This stylish CSS sprite menu technique has three states: idle, hover, and clicked.

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed MenuView Demo

Learn how to create module tabs without the use of client-side scripting.

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite NavigationView Demo

Learn to create a straightforward technique for creating a CSS based menu.

29. CSS Menu with Descriptions

CSS Menu with DescriptionsView Demo

This technique showcases a method for creating a menu that expands when hovered upon.

30. CSS Hover Button

CSS Hover ButtonView Demo

Create CSS button-style navigation menu by checking out this excellent tutorial.

Related content

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photographer based in NY, U.S. He’s also the founder of Desizntech,a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

103 Comments

aravind

April 16th, 2009

Great list!
Thanks for featuring my css menu tutorial.. :)

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

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…

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

Paarth

April 3rd, 2010

Good list but not all are so good, i liked some of them.

David Etherington

April 6th, 2010

Love the glowing buttons got me thinking time for a website makeove :)

Bit Doze

May 1st, 2010

Excelent list

Jose German Martinez

May 10th, 2010

thanks for this excellent information

Subhash Khatri

May 18th, 2010

Really great list. Thanks!

cemo

May 24th, 2010

great menus.Thx for all

Animas

June 8th, 2010

You say, about CSSEdit: “It’s best suited for first time and casual CSS coders.”

Come on. By far the best editor. I use it on very large complex sites.
By your comment i can tell that you have never used it! CCSEit is the best ccs-edtor ever!

Kekko

June 8th, 2010

After reviewing my stats for both my blog and my website I have come to the conclusion that about 97% of my readers use css3 friendly browsers with a majority on firefox… So I have decided to sit down and start learning css3 and really giving it a go….

Aphrodite

July 10th, 2010

Good to see a post about this for a change, fuctionality and navigation should be every websites priority, aesthetics can only get you so far.

Craig

September 3rd, 2010

Damn, this has made me feel like I have been really lazy in this area :-( so Thanks for giving me some inspiration!

ilham ali

October 2nd, 2010

Css looks simple when you see what others done, but when you try to do something from scratch it always take time.

paul

October 7th, 2010

Thanks very much for this useful information.

etoileweb

November 9th, 2010

Does anyone have an idea about how to reproduice the one here : fifa.com ?

keno

November 11th, 2010

Nice Article.. thanks for this useful information.

Randal Reinmiller

January 4th, 2011

Excellent info. I’m new to this sort of thing and very much appreciate this type of info on the subject. Thanks alot!

nesk

January 4th, 2011

Good selection. Navigation can always innovate.

Linda

January 24th, 2011

Thanks a lot! I was looking for this info and finally i got it here…

HomeList

February 2nd, 2011

Thank you so much for this! I finally have a decent navbar in my website now

Stefan

February 11th, 2011

A very nice list.
thanks

Andrew

February 19th, 2011

I remember that I took different menus from
http://www.cssplay.co.uk/menus/
but this collection is great too ;-)

aryan

March 11th, 2011

Good list Pappu

Paarth

March 26th, 2011

great list, good inspiration

Jimmy Nguyen

March 30th, 2011

Another helpful post. I’m standing between full of Menu styles to decide the best choice. I will try on several of 30 techniques above. Thank alot.

Jimmy

noexyoga

April 10th, 2011

Dear Ali ,

did u have example navigation like tool tip ( rounded navigation with arrow at the botom navigation?

Thank yu

Andy

May 3rd, 2011

Thanks for collection. Nice work. Appreciate your effort =)

Jyoti

May 4th, 2011

Realy its so nice…:-)

escapade

May 4th, 2011

Great! God job everything i want is there. I choose Woody menu.
Appreciate your time to give a very good info. From Quebec Canada.

Mak

May 11th, 2011

THANK You So much….

LOVE THEM

YOU MAKE IT SO EASY TO UNDERSTAND. :-)

dumber

May 31st, 2011

8. CSS Menu horizontal
link is dead

Jacob Gube

May 31st, 2011

@dumber: Thanks for the report. The website it links to no longer exists, so I’ve updated the post to indicate that.

Caputo Designz

June 10th, 2011

These menus are great! If anyone needs a pure css menu with rounded dropdowns that is really simple to edit check out: http://caputodesignz.com/blog/?p=99

Reality Dodge

June 10th, 2011

+1 for my design bookmark folder. Thanks

Robin Hood

June 22nd, 2011

These have given me some great inspiration. I always like to avoid using javascript where I can and often the CSS hover types which use a back ground image han be slow and have a slight lag. The ones I like here don’t do that, they all have nice clean code, so that you for choosing such high quality examples. There are so many ‘top 10′ pages on the net, that it’s nice to have found one made by someone who understands the code used to power the navbar/whatever.

Joan Cole

July 22nd, 2011

CSS is something I really want to be good at, but I took a lot of time to learn it. What you have provided us here is an amazing techniques that I want to learn with.

ravi

August 17th, 2011

thank u for ur great list of demo

ian

September 5th, 2011

great site, have learnt tons, but i’m stumped. Can i ask a question? On many sites when i ctrl+ to expand the navbar stays on one line and expands off the side of the window. But when i do it the examples don’t do this but continue on the next line. Can you tell me what i am doing wrong?

Love the site, will keep on coming. Thanks

Ryan

September 18th, 2011

Wow!!! Excellent list of menu!

Bloggerblur

October 7th, 2011

List number 17 look very nice.

anikdey

November 24th, 2011

nice……liked it.

raman

October 9th, 2012

No. 16 and 12 looks really neat and wlwgant

Leave a Comment

Subscribe to the comments on this article.