Dynamic Drive CSS Library- Animated horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free 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:

<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 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.