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

Exactly i am facint the same prob...Using the same graphics as you, mine are clipped off and the menu jumps up and down as I roll over.The whole interface moves up and down ...Anyone having any idea bat how to correct this issue???
Posted by jessy on 10/26, 05:56 PM
should i reach this level in css to be aprofisional ...! how?
Posted by ahmed on 10/31, 03:12 PM
Very good, but is there a way to stop things going awry if the browser window is too small. When the window width is less than the width of the row of tabs, the tabs wrap around but no longer function nicely.
Posted by DrinkDeuchars on 11/04, 08:20 AM
Nice and the same what i am looking for but i want to add submenu also.
so please provide the code with submenu
Posted by Satyendra on 11/04, 11:40 PM
pardon my ignorance, but i am new to all this. I have managed to get the links on my web page (am building a page on geocities) but cannot get the images of the buttons to show. How do I do this
Posted by Geoff on 11/19, 05:32 PM
Exactly what i wanted.

Thanks.......
Posted by Naman on 11/20, 06:29 AM
Try centering it with the following, adding a margin: 0 auto, and removing the width:

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
margin: 0 auto;
font-size: 14px; /*font of menu text*/
}
Posted by B on 11/20, 02:36 PM
correction... you should set the width to the width that the buttons will take up. You'll have to change the width when adding any new buttons, but it's a simple fix.
Posted by B on 11/20, 02:38 PM
hello how can i change the tab from top to bottom ,so when i make mouseover the tab must came from the top to the bottom
Posted by hups on 11/28, 04:56 AM
The concept is very nice, and its looking good, i like the button style
Posted by manikandan S on 11/28, 07:16 AM

Comment Pages 3 of 5 pages  <  1 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.