Trying to replicate this TAB style

[NghiQuach]

Hey guys I’m currently working with bootstrap and using their tab elements and I wanted to override it with a nice design from [Sony’s tab style](http://www.sony.com/index.shtml “Sony’s tab”) .

There seems to be a lot going on with their spans and is it just a matter of copying all those spans and the styling each have?
Although the design looks fairly simplistic I can’t really dissect the code well enough, any tips would be great.

I have a codepen set up of bootstraps implementation which I don’t think looks bad it just doesn’t come off as USER friendly.
http://cdpn.io/LoihJ

[PicnicTutorials]

Try using mine a your guide. I’m sure it’s much easier. From memory I believe I just added more top padding on hover/active/current page. And with a negative margin probably moved down the text so it visually stayed in the same position. Something like that. http://www.websitecodetutorials.com/code/css-nav-menus/css-mega-drop-down-demo.php

[NghiQuach]

Awesome! so when a page is active you set the class to be a s4 class and that is what deals with the shadow. if I wanted shadows on both ends I would have to add another element as well?

[PicnicTutorials]

Oh use this css3 version instead. Much easier to use the shadows. http://www.websitecodetutorials.com/code/css-nav-menus/css3-mega-drop-down-menu.php

[Author]

Posts