Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Inverted Shift Down Menu

Author: Dynamic Drive

This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it. And just for demonstration, it shows how to make the bottom corners of each tab rounded using both CSS3 and Mozilla's proprietary declarations for rounded corners. Note that the rounded corners effect is currently only visible in Firefox (and future CSS3 browsers). The relevant lines within the CSS code are:

-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;

Remove these lines if you're aiming for a consistent look across browsers.


The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 08/10/2007

Revision History: None

Usage Terms: Click here

Your Comments (19)

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

The red color scheme is located in paragraph 8. change #d10000 to what ever color you want
Posted by some dude on 03/12, 05:07 AM
OOps!!!! there are actually a few spots that need to be changed to change the color scheme. change #d10000 in ALL spots to what ever colors you want. Experiment until you find the colors you want to use.
Posted by some dude on 03/12, 05:14 AM
hello
i tried it and works very well
can u tell me how to make the menu aligned to center instead of left
Posted by asma on 03/16, 04:56 PM
Its working good for me... Thanks for sharing the code... nice one..
Posted by Rohit Khariwal on 03/18, 03:57 AM
i want the code for this javascript program
Posted by Pham Quang Canh on 04/21, 08:37 PM
The red color scheme is located in paragraph 8. change #d10000 to what ever color you want!!!hah
Posted by DecoratiVe Works on 04/22, 12:18 AM
Awsome! Works perfectly with my project.!!
Posted by ffs on 04/22, 12:19 AM
I tried your script but can't seem to replicate the red bar the goes across the top of the buttons. I used firebug to find the portion of the script responsible for the line and believe that I copied/pasted everything correctly. Everything else works fine.
Posted by Al on 06/04, 06:22 PM
How to you had background-image to tabs.
Posted by squeeze on 01/15, 02:06 PM

Comment Pages 2 of 2 pages  <  1 2


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