Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Slanted Divider Menu

Author: Dynamic Drive

We got our inspiration for this menu from Simplebit's bulletproof slants. It's an elegant CSS menu bar that uses a transparent "slanted" image to act as a divider and separate each menu item. Change the background color of the menu as desired. It differs from the Simplebits code in that no floating is used, enabling you to easily align the menu items either to the left, center, or right, just by changing the "text-align" property within the CSS code.

Demo:

The single image used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/25/2006

Revision History: None

Usage Terms: Click here

Your Comments (25)

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

wow, excellent code, helped me in nick of time. thanks a lot :)
Posted by simsys on 11/06, 01:56 PM
I don't understand this:
/*Add margin between menu and rest of content in Firefox*/

can someone explain because I do get a 5px gap only in Firefox.

Thanks,BB
Posted by BB on 12/05, 12:52 PM
Thanks for this. I got the link from a comment you left at another site and found it to be a great compilation of the story thus far.
Posted by home drug test kits on 04/02, 12:40 PM
çok hoş ve sade bir menü.

very nice
Posted by gempili on 04/27, 07:41 AM
dynamicdrive.com good for me. i'm from indonesia
Posted by javacell on 05/15, 12:17 AM

Comment Pages 3 of 3 pages  <  1 2 3

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