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 5 of 5 pages « First < 3 4 5

BTW, if you bring these two images into photoshop, you can do any number of things to them including changing the hue, filling the center white part partially by transforming the top blue part "down" towards the center, you can select the button (top one) and separate it from the bottom one into a separate layer, transform the two separately, then join them back together. Just make sure whatever you do to the right image, you also do to the left. btw, these are gifs. when I revised them, I found a gif to be low quality esp since I used a gradient so I saved as a jpg then just changed the name in the coding provided from .gif to .jpg with any thought, any number of changes can be made without knowing ANY css. Course you have to know how to alter an image, but I would think it's pretty hard to do a website if you can't alter an image? If I could upload the changes I made, I would.

Posted by Betty on 03/11, 08:00 PM

I just love it....but i think it didn't work in Internet Explorer 6. Can anyone help me whit that?
THANKS :)

Posted by Diego Lima on 03/13, 09:51 AM

in ie, overflow:hidden doesn't work if you don't put this line:
position:relative;

i tested in: ie7, ff and safari

Posted by wea on 04/01, 09:02 AM

I have also the same problems. The images do not work properly. But I make the images again, and it is works!
I think it is because the left and the right images should have the same dimensions of width and heigt. If that occurs the code above works fine.

Posted by emyies on 04/02, 09:32 AM

how can we make it with buttons consisted of images that we drew on photoshop_

Posted by Burak on 04/07, 04:24 AM

Exactly what I'm looking for. Simple, easy on the eyes,

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Think Flick on 06/02, 09:53 PM

Cool!How can i put it on the right side instead of the left?

Posted by Aliki on 06/07, 09:14 AM

Comment Pages 5 of 5 pages « First < 3 4 5

Commenting is not available in this weblog entry.