Dynamic Drive CSS Library- CSS Indent Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

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

Hi
I need javascript menus and css menus its very help for me thanks

Posted by bala on 08/07, 06:58 AM

Hi,

I was looking for a script just like this one. I am very happy with it. It is very customisable. I have put images next to my links on mine as that is what I wanted. I can also put another script with it if I want to have a drop down menu from each link. I have not had to edit any colours as it goes with the site theme perfectly. I am having fun customising this script.

Thank you :) My search for a really easy nice menu has ended :).

Best wishes
Kate D

Posted by Kated on 08/08, 09:14 AM

I like it! It's very comprehensive. Dynamic Drive is really a big help for me! Thank you so much!

Posted by Daisy on 08/14, 01:49 AM

thanks ist usefull

Posted by şarkı dinle on 08/15, 03:42 PM

Had a heck of a time trying to remove the extra width. However I found that using "width: auto;" solved the problem. Good work!

Posted by John on 08/15, 05:09 PM

Wow!

Posted by Navid Golforoushan on 08/24, 03:02 PM

How do i even put this on my website?
sorry im new

Posted by Haris on 08/27, 11:55 AM

this code doesn't work at all. The items in the list that dont have class="current" are white until hovered over. The effect is completely lost when adding this to every item in the menu.

Don't see how this works in the demo if the code shown is really what is being used.

Posted by nancy on 08/27, 03:20 PM

How do I change color of menu

Posted by latha on 09/30, 02:45 PM

thankyou!

Posted by siva on 10/07, 04:10 AM

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

Commenting is not available in this weblog entry.