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

How do I center this to the page?
Posted by Kenny on 11/07, 12:26 AM
Why use an image that is MUCH bigger than the menu width? I've added up borders, margins padding and 13px text at lineheight 1em and I get 29px so why use a 12*56 image?
I'm trying different colour gradients to match my site but without much success.
Posted by John Errington on 01/08, 03:43 PM
So good menu

thanks a lot
Posted by Lazerdance on 02/03, 09:56 PM
it is very nice
Posted by sandeep on 02/06, 08:27 AM
Is there a way to have the text color of one the menu items different from the rest?
Posted by Bill on 02/18, 10:15 PM
I am trying to configure this menu for a website. Everything seems to be ok except one which I dont know how to fix this problem.

I am using .net. By default one of the menu item is selected which in my case is "Home" and class "current" is set to this item. When I clik on anyother item, it should be depressed one so that I would know this page is selected. What is happening, when I clik, it takes me to the appropirate page but does not change it to the current. So I dont know how to make the selected item as current.
Can anybody help me with this?
Posted by Khan on 03/04, 08:10 PM
very very gooood!
Posted by cambrian12345 on 04/26, 06:14 AM
I LOVE this menu! Thanks...
Posted by Think Flick on 06/02, 10:02 PM

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

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