Dynamic Drive CSS Library- Animated horizontal tabs

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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

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

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

Hello

Sorry but I'm French, i will try to my best to explain my problem! :p I want to do an align="center" on the horizontal menu but I don't know how to do this. I it possible?

Posted by justone22 on 08/08, 12:42 PM

Where are the images?

Posted by thedoc on 10/04, 02:34 PM

Fine post. Kudos to you for sharing this,
edi

Posted by Mark on 10/23, 03:28 AM

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

This what i want.. many thanks

Posted by Joomla panel on 11/07, 02:46 PM

very interesting....

Posted by catherines plus sizes on 11/11, 02:05 PM

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