Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The two image used:

The CSS:


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

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">
<li>Globus 360</li>
<li>About Us</li>

<div class="search" id="search" width: 100% >
<!-- Google CSE Search Box Begins -->
<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" />
<script type="text/javascript" src=""></script>
<!-- Google CSE Search Box Ends -->
</div> <!-- <br style="clear: left" > -->
<!-- end navbar -->
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.

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.

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 »

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.