CSS-Based Navigation Menus: Modern Solutions

Advertisement

Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure – however complex the latter might be.

So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.

Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.

PS: Over the last few months we’ve reviewed CSS-Based Techniques1, CSS-Based Forms2 and CSS-Based Tables3 and CSS-Based Footers4 (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You’ll find even more CSS-related articles in our CSS Section5.

PSS: We have included some DHTML- and JavaScript-based navigation menus in this list by mistake. Sorry for inconvenience.

CSS-Based Navigation Menus

1. Change.org6

Navigation Menus - Change.org7

2. N.Design Studio | Design & Blog8

Navigation Menus - N.Design Studio | Design & Blog9

3. Good Creative – Web and Graphic Design

Navigation Menus - Good Creative - Web and Graphic Design

4. MacRabbit – Welcome10

Navigation Menus - MacRabbit - Welcome11

5. Joyent: Introducing Joyent12

Navigation Menus - Joyent: Introducing Joyent13

6. CSS Vault » The Web’s CSS Site14

Navigation Menus - CSS Vault » The Web's CSS Site15

7. notiam.com16

Navigation Menus - notiam.com17

8. Jamie Huskisson: Full time UK PHP freelance developer18

Navigation Menus - Jamie Huskisson: Full time UK PHP freelance developer19

9. Web design, development and consultancy from Ottawa, Canada – Snook.ca20

Navigation Menus - Web design, development and consultancy from Ottawa, Canada - Snook.ca21

10. BREAKER DESIGN22

Navigation Menus - BREAKER DESIGN23

11. Jen Gordon24

Navigation Menus - Jen Gordon25

12. Tulumarka26

Navigation Menus - Tulumarka27

13. Ars Technica28

Navigation Menus - Ars Technica29

14. CSS Beauty | CSS Design, News, Jobs, Community, Web Standards30

Navigation Menus - CSS Beauty | CSS Design, News, Jobs, Community, Web Standards31

15. Digg / Technology32

Navigation Menus - Digg / Technology33

16. Triple Crown Customer Service34

Navigation Menus - Triple Crown Customer Service35

17. microformats36

Navigation Menus - microformats37

18. Badboy.ro38

Navigation Menus - Badboy.ro39

19. GetMenus.ca40

Navigation Menus - GetMenus.ca41

20. Wedding Extravaganza 2007 – A Perfect Marriage42

Navigation Menus - Wedding Extravaganza 2007 - A Perfect Marriage43

21. Job Pile – Aggregating the Best Job Boards on the Web – Artypapers44

Navigation Menus - Job Pile - Aggregating the Best Job Boards on the Web - Artypapers45

22. Norman Morrow & Co – Estate Agents In Crumlin, Northern Ireland46

Navigation Menus - Norman Morrow & Co - Estate Agents In Crumlin, Northern Ireland47

23. Listal – List the stuff you love! Movies, TV, music, games and books48

Navigation Menus - Listal - List the stuff you love! Movies, TV, music, games and books49

24. folietto50

Navigation Menus - folietto51

25. Tony Yoo – Online Showcase (version2)52

Navigation Menus - Tony Yoo - Online Showcase (version2)53

26. Digital Web Magazine54

Navigation Menus - Digital Web Magazine55

27. Denbighshire Supporting Business56

Navigation Menus - Denbighshire Supporting Business | Denbighshire, Supporting, Business57

28. Pulmad, peod, lillesalong… – Annilill Peoteenindus58

Navigation Menus - Pulmad, peod, lillesalong... - Annilill Peoteenindus59

29. ExpressionEngine – Publish Your Universe!60

Navigation Menus - ExpressionEngine - Publish Your Universe!61

30. coda.coza62

Navigation Menus - coda.coza63

31. purevolume™ | We’re Listening To You64

Navigation Menus - purevolume™ | We're Listening To You65

32. EGOLOUNGE *Büro für digitales Design66

Navigation Menus - EGOLOUNGE *Büro für digitales Design67

33. Merix – Internet Technologies68

Navigation Menus - Merix - Internet Technologies69

34. Bartelme Design | Showroom70

Navigation Menus - Bartelme Design | Showroom71

35. Luis Alarcón, Blog72

Navigation Menus - Luis Alarcón, Blog73

36. CSS3 . info – Everything you need to know about CSS374

Navigation Menus - CSS3 . info - Everything you need to know about CSS375

37. nclud™ a creative web design agency76

Navigation Menus - nclud™ a creative web design agency77

38. Convan Design – Howdy78

Navigation Menus - Convan Design - Howdy79

39. ExpressionEngine – Publish Your Universe!80

Navigation Menus - ExpressionEngine - Publish Your Universe!81

40. Silverpoint: Web Solutions for Schools82

Navigation Menus - Silverpoint: Web Solutions for Schools83

41. Jambor-ee – Celebrating ExpressionEngine

Navigation Menus - Jambor-ee - Celebrating ExpressionEngine

42. far from fearless84

Navigation Menus - far from fearless85

43. Scribd – Home86

Navigation Menus - Scribd - Home87

44. Erika Greco – Blog88

Navigation Menus - Erika Greco - Blog89

45. [Removed]90

Navigation Menus - Photoshop Tutorials and Articles - Tutorial Blog91

46. Welcome to Buzz — Buzz Recruitment92

Navigation Menus - Welcome to Buzz — Buzz Recruitment93

47. Michal Zapoměl – český vlasový design | czech hair design94

Navigation Menus - Michal Zapoměl - český vlasový design | czech hair design - Úvodní stránka95

48. Onlinecenter Upload96

Navigation Menus - Onlinecenter Upload97

49. M122Arts Mixed Media and Technology // oo*o

Navigation Menus - M122Arts Mixed Media and Technology // oo*o

50. KazanShops.Ru98

Navigation Menus - Магазины Казани - казанский сайт для тех, кто покупает - www.KazanShops.Ru99

51. Stone inc. – Aménagements Paysager, Pavés.100

Navigation Menus - Stone inc. - Aménagements Paysager, Pavés, Murets, Tourbe et plus!101

52. Pixellogo102

Navigation Menus - Pixellogo103

53. AUSMAG – das Australien Work & Travel Portal104

Navigation Menus - AUSMAG - das Australien Work & Travel Portal - Arbeiten und Reisen in Australien105

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
  2. 2 http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
  3. 3 http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
  4. 4 http://www.smashingmagazine.com/2007/01/09/css-based-footers-modern-solutions/
  5. 5 http://www.smashingmagazine.com/category/css/
  6. 6 http://change.org/
  7. 7 http://change.org/
  8. 8 http://www.ndesign-studio.com/
  9. 9 http://www.ndesign-studio.com/
  10. 10 http://macrabbit.com/
  11. 11 http://macrabbit.com/
  12. 12 http://www.joyent.com/
  13. 13 http://www.joyent.com/
  14. 14 http://cssvault.com/
  15. 15 http://cssvault.com/
  16. 16 http://notiam.com/
  17. 17 http://notiam.com/
  18. 18 http://www.jhuskisson.com/
  19. 19 http://www.jhuskisson.com/
  20. 20 http://www.snook.ca/
  21. 21 http://www.snook.ca/
  22. 22 http://www.breakerdesign.com/
  23. 23 http://www.breakerdesign.com/
  24. 24 http://www.whoisjengordon.com/
  25. 25 http://www.whoisjengordon.com/
  26. 26 http://www.tulumarka.com/
  27. 27 http://www.tulumarka.com/
  28. 28 http://arstechnica.com/index.ars
  29. 29 http://arstechnica.com/index.ars
  30. 30 http://www.cssbeauty.com/
  31. 31 http://www.cssbeauty.com/
  32. 32 http://digg.com/view/technology
  33. 33 http://digg.com/view/technology
  34. 34 http://triplecrowncs.com/
  35. 35 http://triplecrowncs.com/
  36. 36 http://microformats.org/
  37. 37 http://microformats.org/
  38. 38 http://www.badboy.ro
  39. 39 http://www.badboy.ro
  40. 40 http://www.getmenus.ca/
  41. 41 http://www.getmenus.ca/
  42. 42 http://www.weddingextravaganza.co.uk/
  43. 43 http://www.weddingextravaganza.co.uk/
  44. 44 http://artypapers.com/jobpile/
  45. 45 http://artypapers.com/jobpile/
  46. 46 http://www.normanmorrow.co.uk/
  47. 47 http://www.normanmorrow.co.uk/
  48. 48 http://www.listal.com/
  49. 49 http://www.listal.com/
  50. 50 http://www.folietto.at/
  51. 51 http://www.folietto.at/
  52. 52 http://tonyyoo.com/v2/
  53. 53 http://tonyyoo.com/v2/
  54. 54 http://www.digital-web.com/
  55. 55 http://www.digital-web.com/
  56. 56 http://www.denbighshiresupportingbusiness.co.uk/General/xhtml/default.asp?lang=eng&pn=Home%20Page
  57. 57 http://www.denbighshiresupportingbusiness.co.uk/General/xhtml/default.asp?lang=eng&pn=Home%20Page
  58. 58 http://www.annilill.ee/
  59. 59 http://www.annilill.ee/
  60. 60 http://www.expressionengine.com/
  61. 61 http://www.expressionengine.com/
  62. 62 http://coda.co.za/
  63. 63 http://coda.co.za/
  64. 64 http://www.purevolume.com/sleeveless
  65. 65 http://www.purevolume.com/sleeveless
  66. 66 http://www.egolounge.de/
  67. 67 http://www.egolounge.de/
  68. 68 http://www.merix.com.pl/
  69. 69 http://www.merix.com.pl/
  70. 70 http://bartelme.at/showroom
  71. 71 http://bartelme.at/showroom
  72. 72 http://www.luisalarcon.com/blog/
  73. 73 http://www.luisalarcon.com/blog/
  74. 74 http://www.css3.info/
  75. 75 http://www.css3.info/
  76. 76 http://nclud.com/
  77. 77 http://nclud.com/
  78. 78 http://convandesign.com/
  79. 79 http://convandesign.com/
  80. 80 http://expressionengine.com/
  81. 81 http://expressionengine.com/
  82. 82 http://www.silverpoint.net/
  83. 83 http://www.silverpoint.net/
  84. 84 http://www.farfromfearless.com/
  85. 85 http://www.farfromfearless.com/
  86. 86 http://www.scribd.com/
  87. 87 http://www.scribd.com/
  88. 88 http://www.erikagreco.com/blog/
  89. 89 http://www.erikagreco.com/blog/
  90. 90 #
  91. 91 http://tutorialblog.org/
  92. 92 http://www.buzzrecruitment.co.nz/
  93. 93 http://www.buzzrecruitment.co.nz/
  94. 94 http://www.cvdmz.cz/
  95. 95 http://www.cvdmz.cz/
  96. 96 http://www.onlinecenter.nu/
  97. 97 http://www.onlinecenter.nu/
  98. 98 http://www.kazanshops.ru/
  99. 99 http://www.kazanshops.ru/
  100. 100 http://www.stoneinc.ca/
  101. 101 http://www.stoneinc.ca/
  102. 102 http://www.pixellogo.com/
  103. 103 http://www.pixellogo.com/
  104. 104 http://www.ausmag.de/
  105. 105 http://www.ausmag.de/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertisement
  1. 1

    I agree, some of these menus are inaccessible, what a load of rubbish, bad practice. All fluff and style. Very poor article, you ought to do better than this.

    -2
  2. 102

    I like Joyent: Introducing Joyent

    0
  3. 203

    Wow! it’s great. Thank you! I try to use Welcome to Buzz — Buzz Recruitment menu in my blog.

    1
  4. 304

    I think post #45 hit it right on the head: you have to have menus that indicate what page you’re on. By all means, stay away from javascript – chews up load times and there may be compatibility issues.

    0
  5. 405

    Wonderfull list

    0
  6. 506

    Hi,

    Stu Nicholls (cssplay.co.uk) has now also released a new website dedicated to css menus on
    cssmenus.co.uk. A very nice collection of single level, dropdown, dropline and vertical menus.

    A nice collection of horizontal/vertical menus are also available from exploding boy:
    http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/
    http://www.exploding-boy.com/2005/12/21/more-free-css-navigation-menu-designs/
    http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/

    Just to let you know :-)

    0
  7. 607

    Hi
    I read a couple of posts above and people were looking how to get the css for the menus, to do this use Firefox browser and get the free web developer plugin and that has a function to view the css of a site and then look for the styling of the menu.

    Jono

    0
  8. 708

    Great work..but some of the menues are really boring…..

    0
  9. 809

    Thanks a million buddy, Excellent compilation.
    Keep up the good work.

    0
  10. 910

    the wedding extravaganza 2009 web site looks like a birth control product.

    0
  11. 1011

    very niceeeeeeeeee

    0
  12. 1112

    Tejendra Shandilya

    June 23, 2009 8:55 pm

    That is g8.

    0
  13. 1213

    @Roy Tomeij – They are modern. Evidently using JavaScript to create nice, functional and clean menus is ‘modern’. JavaScript is the big player in the whole ‘Web 2.0′ web development world.

    Just sticking to CSS to create mediocre menus, interactions etc. is boring and not very creative.

    I’ve seen it all before. People who refuse to follow the trends, and in the end stick too much emphasis on ‘accessibility’ and not enough on what is going to make them money. For example, I’m not too bothered if one of my javascript menus doesn’t work on a device which doesn’t support JavaScript!

    Move with the trends, please.

    0
  14. 1314

    this stuff is really good. i did not know that.

    0
  15. 1415

    It is very useful for printscreen works in webdesign,,,:)

    1
  16. 1516

    At least one of those examples uses a drop down menu, which are _not_ user friendly. They hide the links from the user and cause them to have to search for the links.

    0
  17. 1617

    That’s GooD……….

    0
  18. 1718

    Wow What an ideA sir G…….

    0
  19. 1819

    hi, this article as others from SmashingMagazine is perfect. it is very helpful to see all css navigation alternatives in one place.

    thank you…

    0
  20. 1920

    Attitude Design Portfolio

    February 3, 2010 2:46 am

    Brilliant – thanks for the inspiration!

    0
  21. 2021

    Great Navigation

    0
  22. 2122

    greate effect of menu create to be different think but source code is not be explain i’cont use this menu

    0
  23. 2223

    I have a CSS drop-line menu (tableless, without JavaScript).

    But, encountered a problem:
    – The text does not appear in the middle of the menu (the menuitems singleline, multiline – varied)

    How to solve this problem?

    Dropline menu

    #navigation MENU {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    }

    #navigation MENU LI {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #navigation MENU LI A {
    width: 98px;
    height: 54px;
    display: block;
    text-decoration: none;
    text-align: center;
    background: url(http://lh6.ggpht.com/_W2DEFOtz8LQ/TCrNcx6osDI/AAAAAAAAADg/pgBiHgdnpmA/mainmenu.gif);
    }

    #navigation MENU LI A:hover { background: url(http://lh3.ggpht.com/_W2DEFOtz8LQ/TCrNdDTw1eI/AAAAAAAAADo/yA10-qfxNr4/activemenu.gif); }

    #navigation MENU LI:hover MENU { display:block; }

    #navigation MENU MENU {
    position: absolute;
    top: 154px;
    display:none;
    width:auto;
    height:auto;
    }
    #navigation MENU MENU LI{
    float: left;
    width: 98px;
    height: 54px;
    }
    #navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com/_W2DEFOtz8LQ/TCrNdMPZQiI/AAAAAAAAADk/YBwpyylogvc/submenu.gif) }

    #header { width: 800; height: 200; background-color: paleturquoise; }

    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo

    Cím szerinti bontás
    Dátum szerinti bontás
    Kategóriák szerinti bontás
    Keresztény írások

    Áhitatok minden napra
    Könyvek novellák
    Versek idézetek

    Keresztény linkek

    Bibliával kapcsolatos
    Gyülekeztek honlapjai
    Keresztény oldalak

    Multimédiás szolgáltatások

    Filmek videók
    Legyen Ön is misszionárius
    Webalbum
    Keresztény képernyővédő

    Támogatás adományozás
    Fontos tudnivalok
    Adminisztráció

    0
  24. 2324

    I have a CSS drop-line menu (tableless, without JavaScript).

    But, encountered a problem:
    – The text does not appear in the middle of the menu (the menuitems singleline, multiline – varied)

    How to solve this problem?

    Dropline menu

    #navigation MENU {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    }

    #navigation MENU LI {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #navigation MENU LI A {
    width: 98px;
    height: 54px;
    display: block;
    text-decoration: none;
    text-align: center;
    background: url(http://lh6.ggpht.com/_W2DEFOtz8LQ/TCrNcx6osDI/AAAAAAAAADg/pgBiHgdnpmA/mainmenu.gif);
    }

    #navigation MENU LI A:hover { background: url(http://lh3.ggpht.com/_W2DEFOtz8LQ/TCrNdDTw1eI/AAAAAAAAADo/yA10-qfxNr4/activemenu.gif); }

    #navigation MENU LI:hover MENU { display:block; }

    #navigation MENU MENU {
    position: absolute;
    top: 154px;
    display:none;
    width:auto;
    height:auto;
    }
    #navigation MENU MENU LI{
    float: left;
    width: 98px;
    height: 54px;
    }
    #navigation MENU LI MENU LI A { background: url(http://lh4.ggpht.com/_W2DEFOtz8LQ/TCrNdMPZQiI/AAAAAAAAADk/YBwpyylogvc/submenu.gif) }

    #header { width: 800; height: 200; background-color: paleturquoise; }

    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo
    Header Logo

    0
  25. 2425

    Toldi, for Vitaly …
    Issue is code containment.
    One kind of container is logical:
    #grandparent.parent.child
    Another CSS container species is physical (script embedments):
    #navigation missingmenubox menu menucontainers

    The CSS script genus actually carries three species, the aforementioned logical and embed selectors, as well as property name toys.

    Inadequate species containment seems frequently to result in designers wish lushing silly toys. I defer to Stu Nichol’s collective in Merry Olde, wherein gaffing round between species and toys is always on the edge (but not quite that Maryland bunch) — har-har.

    Count your hooks and weights. We love countdowns.

    -1
  26. 2526

    Great css styles etc…i really love all i checked also this from pixellogo and it is very nice i really love those sites as: logophoria.com and there is new website designfantasy.net they say they will be huge so maybe we will see some of their stuff here or somewhere else. Cheers

    0
  27. 2627

    thanx a lot :) I’m seeking drop-down menus…

    0
  28. 2728

    Bravo! Very useful to any starter web designer. I am seeking mega menu css code also.

    0
  29. 2829

    Articles like this are an example of quick, helpful anrwses.

    0

↑ Back to top