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

how can i remove this underline in the meny?

http://img337.imageshack.us/img337/2776/menyar1.jpg

thanx

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

dear menu aizza student

Posted by venu on 02/20, 02:10 AM

hi ineed menu menu menu

Posted by bahaa on 02/23, 08:09 AM

nice veery good

Posted by eglence on 03/02, 10:17 PM

Please tell me what different between this CSS menu and some flash menu?
In fact I programm this builder and need to know why anybody need CSS instead of Flash?

Posted by Frank on 03/28, 02:17 PM

thanks's for this tutorial,
have a nice day for you

Posted by moeldy on 04/02, 01:35 AM

excuse my arrogance, but where do you put the images i order to appear in the menu?
many thanks.

Posted by branko on 04/02, 04:39 PM

I like this menu but it has a problem in Firefox 2.0.0.13. The lines between the buttons do not go reach from top to bottom.

Posted by Patrick on 04/05, 08:05 PM

Great menu however I've got two problems after a link has been visited. I got ride of the visited underlining but now:

1) The menu collapses
2) The width narrows to just the width of text

(Both are probably related - padding being lost?

Can anyone help?

Posted by Chris on 04/16, 06:19 AM

Elegant and effect - excellent! That is the best comment by far , as for the stupid comments made by other non English speakers..dream on ...this is how it is done!

Brilliant, thanks!

Posted by ludo on 05/09, 09:06 AM

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