Light Horizontal Navigation

Published on
3D, Menu, Navigation
No. of comments
Browser compatibility
Firefox 4, Safari 5, Chrome 13, Opera 10, IE 9
MIT License
Light Horizontal Navigation CSS Code Snippet

A light, chunky navigation menu with nice hover and active states.

This snippet makes heavy use of the :active pseudo class in order to toggle the active element as soon as the user presses the mouse button and increase the responsiveness of the UI.

JavaScript can then take over when the user releases the mouse button (onclick) to make the change permanent (not implemented here).

Credit to Daniel Hug for the inset text-shadow effect.

Original PSD by Pixeden.


chai said


JimPaluda said

Hi! Thanks so much for this navigation menu, it works perfectly, great job! :)

I have a question though: do you think you could add some code to make it work with IE8? I know many people who are still using IE8 and unfortunately your code doesn't work with it...

Thanks a lot!

Thibaut said

Thanks, Jim.
The reason I gave up on IE8 is because it doesn't support rgba colors, which I use as background color to pick up the "noise" effect from the page's background.
But it actually renders ok in IE8, just without a background (also the 3D effect is done with box-shadow). You could make this work with some IE-specific styling. Unfortunately I don't have time to work on this right now.

sal said

for Thibaut My name is Mircea... I want to use button something like that but i don't know how.. becouse i use adobe muse i dont know photoshop plese help me...anticipating thanks
with respect... Mircea... send me an email please at

Thibaut said

Hi Mircea! My snippets won't be useful to you unless you know to code, sorry.

John Hearfield said

Hey, I'm using your work to help learn CSS3 and HTML, but how do I make this so that it changes permanently?

Thibaut said

Hi John.
Simply add the "active" class to the list element, either with JavaScript or when you generate your HTML.

edis said

Hi Thibaut.
This one is particulary nice.
I have a question regarding the active class.
Baasicaly, if the element in the nav is clicked, i need to add the active class to the element that has been clicked. What about the element that allready had the active class, do i need to remove it?
Appreciate the answer if you have the time, understand if you don't.
Anyways, like these great snippets of yours.

Thibaut said

Hi Edis
Yes, you need to remove the active class from the previously active element and add it to the new one.
For example with jQuery: $('.nav').on('click', 'li', function(event) { $('.active', event.delegateTarget).removeClass('active'); $(this).addClass('active'); });

edis said

I was kind of hopin your answer would refer to jQuery, since i really like to use it, this should do the trick.
Thanks for your fast reply, way to go. Keep up the good work, this site is full with very useful resources, great design and great code.
Thanks again.

Harald said

Hey Thibaut, I tried to implement this to my website, but

it's moved to the bottom right a few pixels so it doesn't fit :(

you have an idea?

Puneet Hattalli said

I'm have started learning HTML and CSS recently. I 'm interested in UI design. Your website is very helpful. It would be more helpful if you start small tutorial about creating such UI. Thank you

dadicool said

hi ! this was my favorites menu :) and thanks for sharing it , however i couldnt make it work. when i use this $('.nav').on('click', 'li', function(event) { $('.active', event.delegateTarget).removeClass('active'); $(this).addClass('active'); }); . the problem is with the page refresh . when page refresh and goes to some links it comes default css as in the first time. how to make it fixed. i mean when click on some li the active css will not go when page refresh . thanks

Thibaut said

To make the changes persist across page reloads you'll need to use a script (e.g. PHP) that generates a different HTML markup depending on the URL (adding the "active" to the correct item).

None said

"JavaScript can then take over when the user releases the mouse button (onclick) to make the change permanent (not implemented here)."
Does it have anything to do with css also? Is there anyway to add this only changing css? I changed some stuff and i couldn't find where in the code it's setting the 'button down' when clicked. Btw, really cool menu there, really nice.

torang said

excelent !

Leave a comment

Comments are disabled.