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

Great idea. Nice work. Am trying it on a web I'm putting together for my daughter's shop. Thanks.

Posted by Jon on 10/27, 05:02 PM

Elegant and effect - excellent! Thank you - µ

Posted by Mark on 11/03, 06:52 AM

I am only able to shift text left or right, but am unable to center the text (links) in mt data cell. Any tricks other than using a clear image spacer?

Posted by JAZZ on 11/05, 03:29 PM

Hi,

I am new to css . I found this nci,e menu and i want to use it. i have a question though.

The menu i have using this template is about 60% of the width of the page. I've exnted it to 100% but of course some of the right side is empty.
I'd like to place a google search box there but for some reason the box is always under the menu . Any suggestion on how i can do that ? I've got this code so far which works fine .. it just does not display the search box where I want it :

<div id = "navbar">
<div class="indentmenu">
<ul>
<li>Home</li>
<li>Globus 360</li>
<li>Consultancy</li>
<li>Development</li>
<li>Advisory</li>
<li>Partners</li>
<li>About Us</li>
<li>Contact</li>
</ul>

<div class="search" id="search" width: 100% >

<form action="search.html" id="searchbox_009687674107278498736:g58svkeirbu">
<input type="hidden" name="cx" value="009687674107278498736:g58svkeirbu" >
<input type="hidden" name="cof" value="FORID:11" >
<input type="text" name="q" size="25" >
<input type="submit" name="sa" value="Search" >
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_009687674107278498736%3Ag58svkeirbu"></script>

</div> 
</div>
</div>

Posted by Andrew on 11/09, 05:42 AM

I am using this menu on this site. It works out pretty good for an alphabetical index. Of course I have changes the default images to blend with the site colors, but I think this is so simple and straightforward, and the effect really looks great. Just a simple shift down and inversion of the graphics. Thanks SO MUCH!

Posted by Mr. Tag-Man on 11/14, 04:00 PM

i want to learn java script

Posted by JavaScript" rel="nofollow">balu on 12/06, 02:21 PM

Hello this is quite classic menu, Just right i like, i just don't know how can i get images????? To build the menu.

Ass vitor Sousa

Posted by vitor on 12/10, 11:21 AM

Hello All:

I am using this wonderful menu for one of my websites.

Question:
How can I make sure the menu does not wrap to next line, when window is resized? Now when resized menu wraps to fit the window size and does not look good.

Any help is greatly appreciated.

Thanks
Tom

Posted by Tom George on 12/14, 01:57 PM

As simple as this is, I am having browswer issues with the font.

Posted by will on 12/18, 12:37 PM

Is that possible to add a partition between each button. So there will be a separator between each button.

Posted by Doron on 01/10, 02:08 PM

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