CSS-Based Navigation Menus: Modern Solutions


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


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. Photoshop Tutorials and Articles – Tutorial Blog90

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


  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 http://tutorialblog.org/
  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.

  1. 1

    Modern solutions? Excuse me, but some of the above sites use image roll overs. Besides that you need to have javascript enabled to see these, they are plain inaccessible to other user agents than the standard browsers. So much for ‘usability’ and ‘using basic CSS styling’.

    • 2

      Not to mention that 90% of these are just tabbed horizontal nav menus. Wherein lies the “solution”?

    • 3

      CSS can be used for roll-over effects without JavaScript animations. (e.g. a:hover)

  2. 4

    You guys never stop amazing me :)

    Smashing is a name that fit you .

    where is the digg button , need to digg this .

  3. 5

    Great work .

    Keep it up !

    it would be nice if we also had access to the source of those designs .

  4. 6

    It strikes me as mostly design variations on the same theme.

    For true originality you could have restricted this post to just one link :


  5. 8

    Chaaban, they got banned from Digg. Read their “8 Things You Should Know About Smashing Magazine” post.

  6. 9

    is it my browser/computer or is the N.Design nav bar very laggy?

  7. 10

    Very nice to see these great solutions.. but was there are reason for not putting in any vertikal CSS menu’s?

  8. 11

    Скакунов Александр

    March 15, 2007 1:22 am

    I don’t see anything attractive, but thanks for the set.

  9. 12
  10. 13

    I’m in no way bashing these examples or any of the other fine fine sets assembled here, but does anyone else find it odd that the majority of all these examples are design shops or personal portfolios?

    Can we not sell these ideas to our clients?

    Great work though!


  11. 14

    To get the .css code…

    1) View source code of the page
    2) Grab the path to the .css inside the HEAD tags at the top of the page.
    3) Place the path of the .css at the end of the URL in the browser
    4) You’ll see the .css file.

  12. 15

    @ Roy

    There is such a thing as a css image rollover, I use one on my as yet unfinished site redesign.

  13. 16

    Check out this site’s all-css nav. It’s different than the two dozen tabbed horizontal bars.

  14. 17

    Vitaly Friedman & Sven Lennartz

    March 15, 2007 4:11 am

    Jen Simmons, thanks for the reference. Interesting solution, indeed.

  15. 18

    Joost Money…

    Not everyone who views source code steals it…

    Some of us use it to learn from…

  16. 19

    These are all great samples of well designed navigation. However many of them suffer from the “flicker” effect that is associated with a pure css navigation. Although it is mainly only in IE its still a problem… Anyone know how to solve this?

  17. 20

    Maybe this site gives you some inspiriation too.

    Nice Navigation: http://www.favouritz.com/

  18. 21

    Hey. You forgot to mention ‘ExpressionEngine – Publish Your Universe!’

  19. 22

    Designers/Coders should learn not to make their hover the same as their “You are here” style. It’s unusable. When designing a navigation, you should have at least three distinct states: off, hover, active.

  20. 23

    @ Forgiste: using CSS you usually have the roll over on the link (which is the way you should use it). I was referring to the javascript methods.

  21. 24

    Come on, anyone interesting about web developing and design already know these an a whole lot more. What the point of making list of them. “Come on people digg us and click the links so we make some money”, that’s the point, isn’t it?

  22. 25

    @ Jen Simmons: That’s just mystery-meat navigation. Doesn’t score too well in terms of accessibility.

  23. 26

    you can get all of these sites css files..
    But you manually you have to clear your temp directory, then go to that page and then refresh the temp directory the css will be there..with the whole page layout..:0 have fun.. and we didnt tell ya how to do this,,lol

  24. 27

    I dunno whats with all the unappreciative haters. I personally love going through your lists, I get massive amounts of design ideas and see new techniques and styles. I don’t really give a **** if its badly coded. Theres still alot to gain, and the list would have taken a fair amount of effort to compile. So what if they are making money from all the traffic, good on them.

    Anyways keep up the good work and don’t let the haters get you down.

  25. 28

    The tabs are an obvious trend but I also noticed a bunch of carrots/pointers/wedges. I’ll have to keep an eye open and see if this is a general web trend.

  26. 29

    great work…!!!

  27. 30


    There. That was the subtext of your post and you got what you wanted. Happy?

    Now spare us the superior attitude and disdain. It’s tiresome.

  28. 31

    Jamie Huskisson

    March 15, 2007 8:06 am

    Thanks for the feature guys. I only launched the new layout with that menu last night around 11pm.. so to find out by 4-5pm that it had been posted up here was amusing :)

  29. 32

    I took a look at the first few, saw that they were either image-based and thus completely unscalable or had text in them that refused to scale with the browser text height. Meh. Any fool can create a pretty-looking menu if you’re fixing your size. Show me pretty menus that scale up and down gracefully and then I’m impressed.

  30. 33

    is it my browser/computer or is the N.Design nav bar very laggy?

  31. 34

    Now, which of these menu styles can be done using no images at all. I try to keep loading time on my site top-notch and can’t justify extra images for anything.

  32. 35

    There have been quite a few css navigation menu round-ups lately but you’ve again managed to list some of the best. Thanks!

  33. 36

    Found this list a bit uninspiring, just a whole lot variations on tabs.

    Some of theme even have problems like a flicker between the normal and :hover state or worse javascript for a rollover that could easily be done with css.

  34. 37

    “PSS”? I think you mean PPS.

  35. 38

    why is this on digg.com? this sucks. where is the code?

    who gives a crap about a bunch of screens and links to sites?

  36. 39

    check out these menus too: http://www.13styles.com

  37. 40

    Another tabbed one I stumbed across: http://www.brusheezy.com

  38. 41


  39. 42

    not to be rude, but it should be PPS instead of PSS. PS stands for postscript so you want to say post-postscript, not postscript-script.

    Excellent set of examples. I think I’ll be adding this site to my regular routine

  40. 43

    […] smashingmagazine best user friendly navigation and solutions […]

  41. 44

    “Silverpoint: Web Solutions for Schools” could be called a solution if the goal is to confuse the user equally as much as look pretty. It’s almost like a drug. I’ll coin the term “crackNav”.

  42. 45

    what about this menu: bnet.com Is it nice, isn’t it?

  43. 46

    Nice to see but isn’t most of it the same?

  44. 47

    I must say, this is a great list!

  45. 48

    A nice set of examples, but not all of them are user-friendly: I call a menu user-friendly if it highlights the current page (but doesn’t link to it) and hovers over other links – to show you where you can go from here. I think it’s the minimum we can do to make the web more friendly place.

  46. 49

    Uh, ExpressionEngine is in there twice…

  47. 50

    The best collection I’ve ever see, thank you.

  48. 51

    Gold Coast Web Designer

    May 22, 2007 12:34 pm

    great list – very useful – I’m sure I’ll be referring to this list many times!

  49. 52

    yo guys i now how to get the CSS source code for the different sites, but how to i get to see the images to use for the diferent designe, is there a way to get to the images to be downloaded? please let me know, it will be so helpful..

  50. 53

    I don’t know why people keep moaning about some posts on this site. If you don’t like the articles don’t read them. Its as simple as that.

  51. 54

    gerat menu works. i will select one of them and try as soon as possible.

  52. 55

    Realy great work…!!!
    Thank you very much.

  53. 56

    It’s cool! How i can use menu like Triple Crown Customer Service in my blog?. Help me please.

  54. 57

    This is really really great.I would say, probably, that this is the thing i found over the net in last 5 years, the best one.Cool, great and truly amazing.A valueable resource for a developer.

  55. 58

    What is it about that list that is so innovative and modern? These are just a bunch of examples of tabbed navigations. Last time I checked, tabs have been used forever.

  56. 59

    This was what I was looking for.
    Really Great.

  57. 60

    I am interested in the topics discussed but have been feeling a little intimidated by the thought of the work.
    I knew there was a way to do this but I didn’t want to have to use a forum software for this functionality, because, the actual forum aspect would have been superfluous… don’t add more than you need seems to be a good policy

  58. 61

    it would be even better if there are like tutorials below each post showing how to do each :)

    that would be some thing shakie smashing

  59. 62

    Samuel Mobile Phone Deals

    August 28, 2007 1:39 am

    I was really looking for some small CSS menues for my site. I was really very interested in some of the above but there is not CSS code provided would have been great. Is there any chance that this code could be place on the site for others to test and try.


  60. 63

    css xhtml develoepr

    August 31, 2007 4:13 pm

    Great design and menu solutions, though it is very simple to make css list menus which i guess these menus are….

  61. 64

    My favorite… MacRabbit!

  62. 66

    Thank you for this great list! My personal favorite from all above is Tony Yoo – others are mostly just too plain.

  63. 67

    Excellent Article! Very helpfull and informative

  64. 68

    Thank you for this great

  65. 69

    Nice collection

  66. 70

    Very good collection, trying to understand the general idea & markup of the css files will allow you to make the most beautiful navigation menu’s yourself. I started with this collection, it learned me alot.

  67. 71

    I don’t see anything attractive for my site filipinafianceevisa.com but thanks for the set.

  68. 72

    The first thing you have to think about is, what sort of people is your website for. Who are you trying to connect/communicate with. A website is an communication device, so let it be that way. Make navigations simple, understandful en sometimes fun.

    Just as effective as above sets are, but this is more in style of the theme of the website. If people click on it, than it’s ok ;)

  69. 73

    You can easily find, view, and copy the source of any website.
    In the Firefox menu bar, click ‘View’ and then ‘Page Source’ or just Ctrl +U.

    In IE and other browsers it’s technically the same process.

    Hope this helps.


  70. 74

    I have few queries can I know where can I post the question?

  71. 75

    Great resource for css menus.


  72. 76

    Dutch computer community

    February 26, 2008 10:24 am

    Nice list!

  73. 77

    Michael Goldstein

    March 4, 2008 12:49 am

    smashing magazine! a really great resource :) // Michael

  74. 78

    From a software engineering point of view, CSS is a huge ball of mess. It’s counterintuitive and illogical much of the time. As a software engineer it disgusts me how much time I need to spend on hacks and making things align properly. Even when things *should* work, they don’t. Much of this can be blamed on the inconsistencies around browsers. The use of CSS “Frameworks” seems like the best bet.

    I want to spend more time programming the back-end (the substance of the web application), and not messing around with hacks in a trial and error manner. CSS has commited so many software engineering sins that it’s not funny.

    But thank you so much Smashing Magazine for clearing up the illogicalities of CSS.

  75. 79

    Keep rocking the scene!

  76. 80

    great list – very useful – I’m sure I’ll be referring to this list many times!

  77. 81

    ur collections are really good.
    but threr r no vertical menus???????///

  78. 82

    Another good list, but a lot of those are pretty bland. Still, y’know?

  79. 83

    2 times Expression Engine. Seems you like it, hmm? ;)

  80. 84

    check out the menu generator at http://bellspace.net it includes vertical/horizontal support and keyboard-based navigation

  81. 85

    Great source of links! Thanks! I’ve found another website that contains quite a few different website navigitaion css tutorials.

  82. 86

    Very nice list. These give me a few good ideas for my next design project. Too bad some of the links no longer provide working examples.

  83. 87

    But there isn’t a menu template with submenu?

  84. 88

    Awesome resources, great post.

  85. 89

    Agust Gudbjornsson

    July 15, 2008 9:39 am

    Great article guys (as usual!),

    Really need to comment on some of the users who commented here above where they talk about the modern part of the menus.

    The meaning of modern is not something that you don’t see anywhere else or have never seen before, modern means that its used by variety of companies/people in the today market, in this case websites. By saying that these menus are not modern is kind of stupidity or lack of knowledge over the today´s web designs, since you see nearly all major players (such as apple.com) online use menus such as those.

    Tabbed menus have been available since paper tabbed bags where created, even before that time. That does not mean that they cant be modern in the year 2008 on websites :o)

    Weird to see how people can always complain, or be the “clever” one.

    Appreciate the time that these guys are giving us here at SM, awesome content and good resource to keep alive!


  86. 90

    But all these menus possess images as background – It will be that of pra not to make a modern and pretty menu only with css?

  87. 91

    thanks a lot…

  88. 92
  89. 93


  90. 94

    nice menus ….

  91. 95

    web standard developer cleverclick

    September 16, 2008 9:33 am

    Web Standards and Search Engine Optimization are great with these solutions instead of regular buttons. I find these css menus very useful and interesting, though i dont practice everything i see but have them in mind for clients that also are interested in web standards development with xhtml and css solutions. There are some issues with IE 6 sometimes but mostly they work good and its great to have them available.

    Great work

  92. 96

    very cool~~~

  93. 97

    bangsaaaat keren mampus !!! musti gw ambil nih !

  94. 98

    perfectly pure css effects…………thanks

  95. 99


    I am loving smashing magazine too.

    Just wondering… near the beginning of the article all of these import style sheets are mentioned as part of a master stylesheet. I was wondering what the difference of these might be. What kinds of things each one might hold. I had sort of thought that reset.css and global.css would be pretty much the same?


  96. 100

    jeremy24, I don’t know how you think CSS is the problem. Maybe you can explain.

    Software engineering and web design are very different all be it dancing entities. CSS makes web design easier than ever to update, standardize, make accessible and flexible. Aside from by the stubborn developers of IE, CSS is accepted. Interface design requires “fixes” and “tweeks” and good ol’ personal attention to make the best legibility, usability and accessibility possible- that pesky human element. CSS has actually made it possible to tweek, get this, less while increasing the standard of design and clean code.

    Lets not forget our front end designers. please. If you think you have, I recommend you read http://alistapart.com/.

    This is a wonderful study of successful horizontal navigations! Thank you Smashing!

  97. 101

    Ok, so how about the differences between CSS1 and CSS2

  98. 102

    Great lists for css menus. Thank you so much.

  99. 103

    your site is so cooooooool, u r A Mazing

  100. 104

    Great work!

  101. 105

    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.

  102. 106

    I like Joyent: Introducing Joyent

  103. 107

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

  104. 108

    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.

  105. 109

    Wonderfull list

  106. 110


    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:

    Just to let you know :-)

  107. 111

    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.


  108. 112

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

  109. 113

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

  110. 114

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

  111. 115

    very niceeeeeeeeee

  112. 116

    Tejendra Shandilya

    June 23, 2009 8:55 pm

    That is g8.

  113. 117

    @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.

  114. 118

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

  115. 119

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

  116. 120

    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.

  117. 121

    That’s GooD……….

  118. 122

    Wow What an ideA sir G…….

  119. 123

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

    thank you…

  120. 124

    Attitude Design Portfolio

    February 3, 2010 2:46 am

    Brilliant – thanks for the inspiration!

  121. 125

    Great Navigation

  122. 126

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

  123. 127

    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;
    #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
    Keresztény képernyővédő

    Támogatás adományozás
    Fontos tudnivalok

  124. 128

    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;
    #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

  125. 129

    Toldi, for Vitaly …
    Issue is code containment.
    One kind of container is logical:
    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.

  126. 130

    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

  127. 131

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

  128. 132

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

  129. 133

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


↑ Back to top