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 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.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.