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

I think either option can work from a user standpoint. Its more about what you prefer as a designer. Thanks for the tip.

Posted by Dave on 11/09, 08:31 PM

very nice menu, thank you

Posted by tetrix on 11/15, 01:18 AM

Hey , thank you very much for this great stuff! Keep up your great work! Greetings Daniel

Posted by Muskelaufbau on 12/16, 06:07 AM

Nice sample!

Yet, any thoughts on how we might be able to keep the inline <ul> fixed, on a "very" side-ways narrowed window? The menu items ( <li> ) seem to drop down in an asymetrical vertical order. It would be nice if they didn't.

I tried setting width of the <ul> to pixels, as:

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

But, this doesn't help the "search form" much. This time we have a falling form.

So, I've tried setting the position of #myform to "absolute", and setting its left padding to 850px. as:

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

I am a newbie; so, I would appreciate any thoughts on this. Is it a good practice? Should we use margin-left instead? Should we bother to float the "search form" visible on the top-right, up until it meets the menu on the left, as we shrink the window? If so, how?

Thanks.

Posted by Serdar on 02/03, 05:28 PM

All you guys out there using table based layouts please, please wake up to the 21st century. Tbales are GONE, thier inaccesible and difficult to work with, use the skills of a true web desgner. USE DIVS, XHTML, AND THE MOST PWOERFUL WEB LANUGUAGE AROUND [i think] CSS!

Posted by Dan on 03/08, 04:15 AM

can you help me to add a button you are provided with 6 I need nine

Posted by Mitch on 05/27, 03:51 PM

Hi. You know what guys? I think this is very good idea, but I am affraid but not for me :|

Posted by Przepisy kulinarne on 06/13, 01:43 PM

The problem with this menu is that the "current" tab is a link - i.e. to itself. The <a href> itself is styled, not the <li>, so that if you remove the link, the whole thing falls apart. Dumb.

Posted by Joe on 07/09, 04:29 AM

yeah im going to have to agree with Joe. The "current" tab isnt shouldnt be styled that way.

Posted by Rob on 08/03, 02:02 PM

I agree with you but I think it is not perfect idea...

Posted by ifacts on 01/13, 08:33 AM

Comment Pages 2 of 3 pages < 1 2 3 >