A CSS Block Navigation Menu

Mar 29th, 2008 // Work, Xhtml+CSS

CSS is tricky and powerful. It’s easy to create a block style menu with CSS, the tricky part of put a short description under each menu is use SPAN tag, just copy the following to your markup file:

Thanks for Adam pointed out that we don’t need to be wrapped by divs. I made an update with more clean codes here.

<ul class="menu">
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li><
/ul>

then you need to put all these to your css file:

ul.menu { margin:0;padding:0; }
ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
ul.menu li a:hover { color:#ffc300; }
ul.menu li span { font:11px arial; color:#666; margin:0; }
ul.menu li span:hover {color:#999;}

Is that simple! and you can download this zipped sample file below. If you’re interested to see more CSS based menu designs, Smashingmagazine has a great collection and you check out those great design from all over the world.


482 times download.

See Also

19 Commentsso far, Leave a comment or Pingback.

  1. I love the new design. Congratulations!

    → Peety // Mar 29th, 2008

  2. Thank you, Peety :)

    → yichi // Mar 29th, 2008

  3. Nice technique. Although with your current CSS, it doesn’t work in IE6, since IE6 doesn’t support the :hover pseudoclass for elements other than “a”. If you replace the “#menu li span:hover” with “#menu li a:hover span” (since the span is inside the a), it’ll work in IE6.

    Also, you can replace the br in each a with a space and add “display:block” to the “#menu li span”. This gives the same effect with less markup. A small thing, but I think it’s a bit cleaner.

    → Andrew // Mar 29th, 2008

  4. It’s fashionable to add some description to the navigation.Nice to see you catch up with it :-)

    → Lunatic Sun // Mar 30th, 2008

  5. I was doing some similar projects, it will certainly be a good alternative these designed for you. Thanks yichi :)

    Sorry traslation

    → Nikko // Mar 30th, 2008

  6. Trying 2 find some tutorials these days
    cheers bro

    → C.J. // Mar 30th, 2008

  7. Very nice and elegant! Thank you for sharing. :-)

    → Caustic Dave // Mar 30th, 2008

  8. You could take it one step further and make the span a block element, float it and clear it. That would allow you to get rid of that extra br in the code and keep your CSS oh-so-separate.

    → Zack Katz // Mar 31st, 2008

  9. @andrew @zack, thank you so much for your tips… I should make an update for it 8)

    → yichi // Mar 31st, 2008

  10. I think instead of putting a tag with an id in there, you could simply put a class or id onto the tag, and thereby eliminate the need for the unnecessary tag, like this:

    Menu01Short desc
    Menu02Short desc
    Menu03Short desc

    and then change the css to:

    ul.menu { margin:0;padding:0; }
    ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
    ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
    ul.menu li a:hover { color:#ffc300; }
    ul.menu li span { font:11px arial; color:#666; margin:0; }
    ul.menu li span:hover {color:#999;}

    which eliminates a tag and a line of css

    → Adam // Apr 8th, 2008

  11. Sorry, my last post didn’t make much sense, as I wasn’t thinking and just wrote the code down instead of writing it properly. Okay, I was meaning you can get rid of the div tag, so that your html looks more like this:

    <ul class="menu">
    <li><a href="#">Menu01<br /><span>Short desc</span></a></li><li><a href="#">Menu02<br /><span>Short desc</span></a></li><li><a href="#">Menu03<br /><span>Short desc</span></a></li></ul>

    → Adam // Apr 8th, 2008

  12. @Adam, Thank you so much for pointed out, I already made an update in this with your pretty clean codes, it was great 8)

    → yichi // Apr 11th, 2008

  13. Very cool! I used a similar menu in my last layout though the code was a lot messier than the clean code Adam gave. Thanks. Now I know how to tidy it up a little.

    FYI, my old blog was featured on the menu article by Smashing Magazine. LOL. It was quite shocked to find out since I didn’t really add any fancy coding to it. I used to be more of a graphic design enthusiast rather than a web developing enthusiast.

    → Ivy // Apr 18th, 2008

  14. Hi there…
    I was wondering. By the way, i love this menu solution:)
    But i was wondering, i have this menu up and running on my website (testwebsite), and it all looks good in Firefox and Opera, but unfortunately IE7 doesn’t seem to like the menu. It shifts the complete header and the menu underneath it. I read the comment Andrew wrote and hoped this would fix my “problem” too.
    Unfortunately it didn’t.
    I can’t test it in IE6, since it’s not installed on this computer, but does someone know of a quick fix for this?
    The testsite = http:www.staygoldstudio.com/2008

    Thanks in advance,
    Roy

    → roy // Apr 28th, 2008

  15. This works great for in line glossaries.

    → Jarod Clark // Apr 29th, 2008

Trackbacks

  1. CSS Block Navigation Menu « Xyberneticos - Mar 30th, 2008
  2. Menús en CSS muy buenos » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar. - Apr 3rd, 2008
  3. it came from mars » Blog Archive » The Right Keyboard is Paramount - Apr 6th, 2008
  4. it came from mars » Blog Archive » The Right Keyboard is Paramount - Apr 6th, 2008

Reply to “A CSS Block Navigation Menu”