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 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
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

How can i center menu text ?


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 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.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.