A CSS Block Navigation Menu

40 March 29, 2008

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 Short desc</a></li> <li><a href="#">Menu02 Short desc</a></li> <li><a href="#">Menu03 Short desc</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.

2039 times download.

Tagged as: CSS, design
Posted in: Work, Xhtml+CSS

Currently 40 comments, want to say something now?

Peety
Mar 29, 2008
5:08 pm

I love the new design. Congratulations!

yichi
Mar 29, 2008
5:08 pm

Thank you, Peety

Andrew
Mar 29, 2008
5:08 pm

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.

Lunatic Sun
Mar 30, 2008
5:08 pm

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

Nikko
Mar 30, 2008
5:08 pm

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

Sorry traslation

C.J.
Mar 30, 2008
5:08 pm

Trying 2 find some tutorials these days
cheers bro

Caustic Dave
Mar 30, 2008
5:08 pm

Very nice and elegant! Thank you for sharing.

CSS Block Navigation Menu « Xyberneticos
Mar 30, 2008
5:08 pm

[...] nuestro botón. Para mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu. Ver Demo - Mas [...]

Zack Katz
Mar 31, 2008
5:08 pm

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.

yichi
Mar 31, 2008
5:08 pm

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

[...] que comentan en Xyberneticos, posee un efecto mouseover muy bonito y elegante. Lo han encontrado en Vikiworks, un magnífico diseñador. Creo que lo incluiré en mis próximos [...]

it came from mars » Blog Archive » The Right Keyboard is Paramount
Apr 6, 2008
5:08 pm

[...] and made a navigation menu in the header (look above this post). Which is a bastardised version of Vikiworks.com block navigation menu code. I have also been looking for and testing out different ways to display [...]

it came from mars » Blog Archive » The Right Keyboard is Paramount
Apr 6, 2008
5:08 pm

Adam
Apr 8, 2008
5:08 pm

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 8, 2008
5:08 pm

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 Short desc</a></li><li><a href="#">Menu02 Short desc</a></li><li><a href="#">Menu03 Short desc</a></li></ul>

yichi
Apr 11, 2008
5:08 pm

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

Ivy
Apr 18, 2008
5:08 pm

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.

roy
Apr 28, 2008
5:08 pm

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

Jarod Clark
Apr 29, 2008
5:08 pm

This works great for in line glossaries.

Djin
Jul 17, 2008
5:08 pm

thnks for sharing very ilustrative!

NoWares
Aug 23, 2008
5:08 pm

Thanks for the nav menu.
It’s very simple to implement, but looks great and will still be readable for SEO reason….

Great post

Richidi
Nov 10, 2008
5:08 pm

Thanks for the nav. One question, how can i center it? I want it to top-center.. Getting float off doesn’t help. Any ideas?

Css - Menu de Navegación en Bloques at Blog Borchani Studios
Feb 19, 2009
5:08 pm

[...] mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu. Ver Demo - Mas [...]