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

Inverted Shift Down Menu II

Author: Dynamic Drive

This inverted horizontal menu creates tabs where the active tab is both longer and its text offset downwards compared to its less active counterparts. It does this by manipulating the tab's top/bottom padding values plus the color of its bottom border.

Demo:


Alternate, non active hover tabs:


By default moving your mouse over a tab triggers the "active" style on it. If you wish to disable this (as seen in the second example above), replace the rule:

.invertedshiftdown2 a:hover{
"
"
}

inside the CSS code with just:

.invertedshiftdown2 a:hover{
background-color: #D10000; /*Highlight red color theme*/
color: white;
}

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 08/10/2007

Revision History: None

Usage Terms: Click here

Your Comments (24)

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

Its not the perfect idea but a good idea.
Posted by Tagesgeld on 04/03, 04:53 PM
Very useful advices. I think I will search more about this on the Net, Guys. Many thanks
Posted by przepisy kulinarne on 04/24, 12:06 PM
When I paste the <style> source within the <head></head>, the red bar across the top appears, however, when I place the <style> source in a file and <link> it in <head></head>, the red bar at the top of the menu does not show up. Am I missing something?
Posted by Peter Loo on 05/04, 04:05 PM
thanks guy for the nice thing..

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/
Posted by Think Flick on 06/02, 10:04 PM

Comment Pages 3 of 3 pages  <  1 2 3


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