Light Horizontal Navigation

Published on
Tags
3D, Menu, Navigation
No. of comments
15 comments
Browser compatibility
Firefox 4, Safari 5, Chrome 13, Opera 10, IE 9
License
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.

15 comments

chai said
1122fe39b3f12df220be4a9f8cb00032

nice!thanks:)

JimPaluda said
1d8d318b49aebd4265b6da27efe6f8c6

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
B6374f07090c513a73b875e0c5fe5924

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
54bd3253351a267bd8fe54e2f1ec70c6

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 demian.mircea@gmail.com

Thibaut said
B6374f07090c513a73b875e0c5fe5924

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

John Hearfield said
5fa8212f0f08d90f2275a5177172d85f

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
B6374f07090c513a73b875e0c5fe5924

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

edis said
3896f98009d53c40eaaf498b11ddcd0e

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
B6374f07090c513a73b875e0c5fe5924

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'); });
Thanks

edis said
3896f98009d53c40eaaf498b11ddcd0e

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
9f3e6503f8aad392ee6fac4f50c36b26

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
14cb102f4c9b7660daf055f3f41e25c3

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
E17edc1290b3f36e587b4ef470bf4fdd

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
654c04b8110238c9abd7a62e88d53b31

Hi
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).

Leave a comment