Dynamic Drive CSS Library- Inverted Shift Down Menu II

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

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:

<style type="text/css">

.invertedshiftdown2{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Highlight red color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown2 ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.invertedshiftdown2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown2 a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 5px 10px; /*Padding within each menu item*/
background-color: lightblue; /*Default menu color*/
border-bottom: 8px solid white;
}

.invertedshiftdown2 a:hover{
background-color: #D10000; /*Highlight red color theme*/
padding-top: 10px; /*Set padding-top value to default's padding-top + padding-bottom */
padding-bottom: 0; /*Set padding-bottom value to 0 */
border-bottom-color: #D10000; /*Highlight red color theme*/
color: white;
}

.invertedshiftdown2 .current a{ /** currently selected menu item **/
background-color: #D10000; /*Highlight red color theme*/
padding-top: 10px; /*Set padding-top value to default's padding-top + padding-bottom */
padding-bottom: 0; /*Set padding-bottom value to 0 */
border-bottom-color: #D10000; /*Highlight red color theme*/
color: white;
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}

</style>

The HTML:

<div class="invertedshiftdown2">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li class="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>	
<li><a href="http://www.dynamicdrive.com/style/" title="CSS">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>

<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>
<br style="clear: both;" />

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

I would suggest it if you could modify this menu: It would be wonderful, if it would support dropdown for single menu items.

Posted by Stefan on 08/11, 01:07 PM

Why the button"Find" cannot search the words that I type in the blank?

Posted by So on 08/15, 02:20 AM

The "find" button along with the search form are simply part of the interface demo, and do not function.

Posted by ddadmin on 08/15, 03:21 AM

oh,thanks!
Why the color does not change in the website while I have changed the code in ".invertedshiftdown2 a{color: white;}" ?

Posted by So on 08/16, 03:54 AM

I really like the demo version better than the alternate version. Thanks a lot, great work!

Posted by Ders on 08/20, 06:13 PM

I like Inverted Shift Down Menu II it looks great!

Posted by Tom on 08/24, 07:42 PM

when i change the color isn't working right.. :( does anyone have the same problem?

Posted by Tom on 08/24, 10:39 PM

The color combination black instead of light blue and dark red was looking gr8.. thanks guy for the nice thing..

Posted by Shaon on 08/30, 04:12 AM

How can a submenu level be achieved with this menu?? Also why does this menu when placed in a web page does not allign to the left. I am using a table based web format but cannot seem to align the menu to the left.

Posted by qaysar on 09/22, 08:04 AM

hey its great....
but i want to put my google adsense search box instead of that default one.....but if i do that then the google's default css gets overwrite by the css of the menu..
and i don't think google will like that :(

any help would be appreciated !

Posted by rhlblue on 11/07, 09:00 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.