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 4 of 5 pages « First  <  2 3 4 5 >

if you have the above div (animatedtabs) inside a wrapper div with a certain width (say 600px), how would you get the tabs to be centered inside the wrapper div?
Posted by Vince on 11/30, 01:05 PM
I know someone earlier said to add a margin: auto and then to manually set the width with which the buttons will take up. This is not a very good fix, as then if the user increases the size of the font in their browser, the buttons enlarge and then take up two lines since the width is hard coded and does not expand to accommodate the change in text size.
Posted by Vince on 11/30, 03:08 PM
I have put the code in and I am missing the left-image....I have tried to find it, but to no avail!
HELP>>>>>HAVE RIGHT BUT NOT LEFT
Posted by Streets on 12/04, 07:47 AM
Very useful CSS menu.
Posted by sandeep on 12/30, 05:21 AM
Thank you very much for your site!
Posted by Max on 01/11, 07:28 PM
I would love to have these buttons and blogger. Looks like I need a code or do not know ... . Can you help me?
Posted by Lady M on 01/18, 01:51 PM
Can this can be arrage in vertical format ?
Posted by Rajiv Jain on 01/21, 09:28 PM
Hello ,

But where is that image if anyone have idea about it please tell me
Posted by vijay on 02/12, 05:21 AM
how can i center them? they are all on the left. also, the images don't show up for me? where can i get them? thanks so much! please answer me at: cassidy_hudson@yahoo.com
Posted by sillyhead on 02/25, 06:50 PM
umm...you will see that there are two images side by side. the "left" one is really skinny on the left then you will see a very thin white line separating it from the wider image on the right.

you can always download them directly using:

http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif

http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif

then right click and save as same name into "images" folder if that is what you use. If you use a folder called image, you will need to change the "media" in the url in the css to 'images'.

the path to the actual image was in the page source. duh....sorry. granted, the two images were hard to see...
Posted by Betty on 03/11, 07:55 PM

Comment Pages 4 of 5 pages « First  <  2 3 4 5 >


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