Dynamic Drive CSS Library- CSS Indent Menu

CSS Library: Horizontal CSS Menus: Here

CSS Indent Menu

Using two gradient background images, this horizontal CSS menu makes the active/ selected menu item appear indented. The width of the menu is set to 80% of its container in the demo .The entire menu markup plus images combined comes in at a very lean 2.5kb.

Demo:

The two image used:

The CSS:

<style type="text/css">

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 80%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(media/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(media/indentbg2.gif) center center repeat-x;
}

</style>

The HTML:

<div class="indentmenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />
</div>

Code Info

Rate this code:

Date Posted: 09/18/2007

Revision History: None

Usage Terms: Click here

Your Comments (41)

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 5 pages « First < 1 2 3 4 5 >

Are there any possibilities to highlight the one that is active.
If you click on one of the menuitems, it should be highlighted so I know that´s the one I´ve clicked at.

Brgds
Marcus

Posted by Marcus on 01/16, 02:41 AM

good exellent

Posted by haritha on 01/19, 10:16 AM

This menu is very nice

Posted by Sohag on 01/25, 09:53 AM

send me indentbg.gif

Posted by Lavish on 01/28, 01:23 AM

its supper, thanks!

Posted by mexx63 on 02/01, 01:48 AM

hay a.q nasıl olacak bu bi türlü html sayfasına gömemedim bunu

Posted by ali on 02/04, 06:51 AM

In ie 7, the menu compresses. I cannot figure out how to fic this.

Posted by Chris on 02/12, 01:15 PM

Great menu! Is it possible to add a submenu (drop down)? If so, how? Thanks!

Posted by Rob on 02/12, 08:42 PM

very nice menu

Posted by projektowanie stron www on 02/13, 12:00 AM

how can i remove this underline in the meny?
http://img337.imageshack.us/img337/2776/menyar1.jpg

Posted by Simp Ops on 02/14, 03:48 AM

Comment Pages 3 of 5 pages « First < 1 2 3 4 5 >