Dynamic Drive CSS Library- Animated horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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:

<style type="text/css">
    
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(media/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(media/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

</style>

The HTML:

<div class="animatedtabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/" title="CSS Examples"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>

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.