Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Animated horizontal tabs

Author: Dynamic Drive

These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab. The selected tab is first stretched vertically by giving it a thick bottom padding, then plucked out thanks to the CSS "top" property value that's smaller than the normal tabs'. The result are tabs that animate without any scripting.

BTW, the amount the selected tab jump up can be easily adjusted- refer to the comments inside the CSS.

Demo:

The two images used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 04/12/2008

Revision History: None

Usage Terms: Click here

Your Comments (47)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 5 pages  <  1 2 3 4 >  Last »

Good css menu script. Does it validate? The images are like ice.
Posted by Ethan on 06/07, 05:42 PM
Cool.. Nice buttons Is it hard to change the design?
Posted by albert on 06/08, 10:37 PM
thanks it is simply super.Good css menu script.
Posted by raj on 06/17, 09:33 AM
I just tried above demo,but it is not working if no of characters in tab are more.Layout is not looking proper.If no of characters are more then some characters comes out of tab.Why tab size not increases or decreases dynamically.
Then which image I have to use ?
Please guide me.
Posted by Umesh on 06/20, 04:59 AM
this was what i was looking thanks. And even I have the same doubt like the functions here. Would it be possible to add a 2nd row of the same type of tabs below the first, and change that row based on the selected tab above? Any help for this
Posted by Jenitha on 06/26, 09:17 PM
it's jumpy if you dont give .animatedTabs enough height:
height:40px;
Posted by paul on 07/02, 04:42 PM
I am having trouble making the images work... PLEASE HELP...i cant put the url so it would show up... email killoskate13[at]gmail.com

THANK YOU
Posted by Mikhail on 07/08, 05:32 PM
Nice menu. I was looking for this. It works cool.
Thanks!
Posted by Robert on 07/25, 02:22 AM
For some reason this doesnt work on my project. The tabs have simply created a space underneith them and fill that space when I roll-over/select. Any help would be appreciated as this would look very good on my page.
Posted by Duck__Boy on 07/25, 08:54 AM
Where are the images?
Posted by thedoc on 10/04, 02:34 PM

Comment Pages 2 of 5 pages  <  1 2 3 4 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.