Totally obsessed...

A CSS Block Navigation Menu

Mar 29th, 2008 // Work, Xhtml+CSS
19 comments →

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.


676 times download.


See Also

19 Comments So far, want to say something?

  1. Peety

    I love the new design. Congratulations!

    Mar 29th, 2008 at 5:13 pm
  2. yichi

    Thank you, Peety :)

    Mar 29th, 2008 at 5:16 pm
  3. Andrew

    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.

    Mar 29th, 2008 at 7:16 pm
  4. Lunatic Sun

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

    Mar 30th, 2008 at 1:55 am
  5. Nikko

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

    Sorry traslation

    Mar 30th, 2008 at 5:55 am
  6. C.J.

    Trying 2 find some tutorials these days
    cheers bro

    Mar 30th, 2008 at 1:12 pm
  7. Caustic Dave

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

    Mar 30th, 2008 at 2:14 pm
  8. Zack Katz

    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.

    Mar 31st, 2008 at 5:39 pm
  9. yichi

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

    Mar 31st, 2008 at 7:07 pm
  10. Adam

    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

    Apr 8th, 2008 at 3:14 pm
  11. Adam

    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>

    Apr 8th, 2008 at 4:05 pm
  12. yichi

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

    Apr 11th, 2008 at 7:38 am
  13. Ivy

    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.

    Apr 18th, 2008 at 3:02 am
  14. roy

    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

    Apr 28th, 2008 at 6:45 am
  15. Jarod Clark

    This works great for in line glossaries.

    Apr 29th, 2008 at 1:27 am

Leave a Reply