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*/
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 (49)

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

Is this able to be a drop down menu as well?

Posted by J on 05/15, 05:59 PM

very nice description ... but it seems like firefox has a problem to display it right ... try my site ... what to do ? thx !

Posted by mshphd on 05/26, 06:50 AM

You can do this horizontal css menu using just css scripts without images, ill try post it here soon.

Posted by Ethan on 06/08, 04:07 AM

hi , its very nice . I can not imagine menu,i m new web
developer.
thanks for this site. and i proud of design developer

Posted by ajay on 06/08, 06:41 AM

Nice one!It really helped me create some cool menu style using this one as base. Just change the gradient images and tahts it. Should i submit those here for people to use?

Posted by KM Website Design Melbourne on 06/14, 12:17 AM

How do I use the images in CSS? Do I need to upload them or what?

Posted by Debbie on 07/13, 06:58 PM

hi this is murtuza.

i just utilize the menu option, its excellent job. i appreciate....

thankz.

Posted by murtuza on 07/16, 02:35 AM

It is very nice , I like it? How to add a drop down sub menu to it?

Thanks

Posted by Web Control on 07/17, 08:52 AM

this menu is fun and looks great. changed the colour

Posted by marko on 07/24, 05:16 AM

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