Dynamic Drive CSS Library- Animated horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (37)

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

Hello ,

But where is that image if anyone have idea about it please tell me

Thanks.
Ujwal Khairnar

Posted by Ujwal khairnar on 05/15, 01:18 AM

Exactly what I'm looking for. Simple, easy on the eyes, and low overhead. Was hoping you can say why my version looks different than yours. Using the same graphics as you, mine are clipped off and the menu jumps up and down as I roll over.

thanks!

Posted by pdx on 05/22, 09:37 PM

I love it! But how do I centre it?

Posted by Simon on 05/23, 11:30 PM

very supporting for a students

Posted by Bhaskar on 05/28, 04:58 AM

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

cool script

Posted by youtube on 06/16, 05:05 PM

thanks it is simply super.Good css menu script.

Posted by raj on 06/17, 09:33 AM

asdasdasdasdasd

Posted by ASDSAD on 06/17, 12:45 PM

thanks for the cool menu
http://www.listkerala.com

Posted by Kannan on 06/20, 02:05 AM

Comment Pages 2 of 4 pages < 1 2 3 4 >