Dynamic Drive CSS Library- CSS Indent Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

CSS Indent Menu

Author: Dynamic Drive

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*/
overflow: hidden;
}

.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>
</div>

Code Info

Rate this code:

Date Posted: 09/18/2007

Revision History: July 4th, 08": Updated CSS and HTML for automatic clear float.

Usage Terms: Click here

Your Comments (69)

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 7 of 7 pages « First < 5 6 7

How do I center this to the page?

Posted by Kenny on 11/07, 12:26 AM

Why use an image that is MUCH bigger than the menu width? I've added up borders, margins padding and 13px text at lineheight 1em and I get 29px so why use a 12*56 image?
I'm trying different colour gradients to match my site but without much success.

Posted by John Errington on 01/08, 03:43 PM

So good menu

thanks a lot

Posted by Lazerdance on 02/03, 09:56 PM

it is very nice

Posted by sandeep on 02/06, 08:27 AM

Is there a way to have the text color of one the menu items different from the rest?

Posted by Bill on 02/18, 10:15 PM

Hi,
I am trying to configure this menu for a website. Everything seems to be ok except one which I dont know how to fix this problem.

I am using .net. By default one of the menu item is selected which in my case is "Home" and class "current" is set to this item. When I clik on anyother item, it should be depressed one so that I would know this page is selected. What is happening, when I clik, it takes me to the appropirate page but does not change it to the current. So I dont know how to make the selected item as current.
Can anybody help me with this?
Thanks

Posted by Khan on 03/04, 08:10 PM

very very gooood!

Posted by cambrian12345 on 04/26, 06:14 AM

I LOVE this menu! Thanks...

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Think Flick on 06/02, 10:02 PM

Comment Pages 7 of 7 pages « First < 5 6 7