Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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:

The HTML:

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 1 of 5 pages  1 2 3 >  Last »

Looks cool, altough I hate the buttons style. ;]
Posted by Xevo on 04/21, 06:15 AM
WOW!! Just love it :) Thanks,
Posted by Vitalia on 04/23, 02:25 PM
Just what I was looking for! Thanks!
Posted by Player 1 on 04/24, 09:31 AM
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? I've seen some similar functions elsewhere, but they all seem to have a flat appearance. This is much more polished.
Posted by Ltetzner on 04/29, 02:57 PM
Looks good but how hard is it to changed colors and sizes?
Posted by drm1963 on 05/02, 12:17 AM
Thanks! Just what I was looking for!
Posted by SACHIN on 05/04, 11:56 PM
Very nice but... Why not post the Fireworks png or psd file?
Posted by Jiffy Peat Pellets on 05/14, 11:57 AM
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

Comment Pages 1 of 5 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.