Tabbed Navigation

Published on
Tags
Header, Dropdown, Tabs, Menu, Navigation
No. of comments
16 comments
Browser compatibility
Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7
License
MIT License
Tabbed Navigation CSS Code Snippet

An elegant tabbed navigation menu with dropdown menus.

Original PSD by Premium Pixels.

16 comments

DreamFAW said
A20566af09cfa5d1394f5e9edb5562bb

Active element doesn't work...

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Hi. What doesn't work exactly? This is just CSS so the links don't do anything and the active element is always the same.

Indyaner said
2b7bac198b8d719b486d570bb8d5173b

That is actually a really really nice Menu you've done there. YOU Thibaut are a gentleman and a scholar. Thank you.

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Thank you! :)

mahmoude said
Dac03c2d6f84f4be088290d6417fb306

nice work man

dave said
F32e50779250e17a83183b65a723ec1b

Thibaut, Nice menus and look great on the desktop and tablet.
Have a question. I see you can make the class active on a link with no drop down but how would I show the user that a drop down is active? Like if I clicked on the Music category could I get the Music menu to stay white?

Dave

Thibaut said
B6374f07090c513a73b875e0c5fe5924

Hi Dave

Good question.

A dropdown tab can receive the "active" class and will look the same as a normal active tab. You can still mouse over it to show the dropdown, but I agree it'd be good to highlight the active category within the dropdown, which isn't done in the demo.

Hope that answers your question.

dave said
F32e50779250e17a83183b65a723ec1b

Hi Thibaut,

Yes, I meant just the parent drop down. I see I can achieve my goal by adding active to the li. <li class="dropdown active" >

Thanks for the quick reply!
BTW, I saw your post via Smashing Magazine.

Dave

Jerry said
987ce81c454a307d6b695d53d2bf7ce0

Does this work in IE?

Thibaut said
B6374f07090c513a73b875e0c5fe5924

It works in IE7+.

stephanie said
F3b4401486d4b6a62e63f01ea7f49173

Nice!!

debu said
53e9318ad542d1885bfb434ea1aa11fd

it is good.... but can you plz tell me how can i use this

Mike Badgley said
2623dda96ea467b02225e1dfb0906b9e

This is a very nice looking menu, but I question the point? I mean there are thousands of others that are identical in functionality as this one?

shirasaya said
910520acece8d6e0e5bfc0b32a55c279

would be possible to create a new sub-level? (third level)

Meghnil said
8fde2a99001ffa9aa0a9b0a9a3dbe155

Hi Thibaut!!!
You Have Did A Tremendous Work On the Site
I Really Appreciate Your Work...(y)

Is It Possible to Make Those Things in Simple HTML and CSS Only??

Yacko said
C08322b8c84943082c227ded974115ee

Guys This really really awesome We know you are doing great things and I hope you will keep going it that is every thing for us (y) Thanks alot

Leave a comment