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

This is new, I didn't knew it before. Nice!

Posted by Lorin on 09/22, 07:49 AM

Huh!
So all you have to do is create an "opposite" gradient and it give sthe illusion of being depressed.

Wouldn't have thought of that, neat!

Posted by Hakai on 09/26, 12:31 PM

How do I put end caps on it?

If you try to make the width just to fit the text button you still get two pixels sticking out on the right.
Made some and end caps and it would look OK if placed butt end.

Posted by Tony P on 10/01, 11:20 AM

To remove any extra width so the menu stops right after the last menu item, try removing the width property from the CSS code:

width: 80%; /*width of menu*/

Posted by georgec on 10/03, 02:10 AM

Hello.

How can i center menu text ?

Now:

Menu Menu Menu

İ want:
Menu Menu Menu

Posted by Nazim on 10/07, 03:45 PM

I had a weird issue using this menu.

Expected result:

Menu Menu Menu

Current result:

Menu Menu Menu

What I want:

This Menu Is *FUN*!

Any clues?

Posted by MrMenu on 10/11, 11:33 AM

I LOVE this menu!

...five stars...no doubt about it!

Posted by Flash Master on 10/17, 02:54 PM

how to i add the css class file it's not being showed
in the properties for the two shaded buttons

Posted by rajkiran on 10/18, 07:17 PM

its kool! it suits what i was looking for, now i can replace my existing 25kb flash menu which is entirely similer to this one..thanks!

Posted by hiren on 10/19, 03:18 AM

i need to center menu and cut off ends so only the centered text shows.

Posted by bob on 10/26, 02:31 PM

Comment Pages 1 of 7 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.