Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

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

i was wondering can you change the font size on this instead of 90% to like font size="1" if yes that will help me a lot.
Posted by xwf productions on 10/24, 04:43 PM
looks nice and sleek, but if the buttons are clicked in the corners you get the wrong link.
Posted by Richard S on 12/29, 07:06 PM
Simple and i like this one!!
Thank you very much..
Posted by Jeffry Pianov on 03/25, 11:31 PM
Looks decent. Would like to see addition of sub-menus though.
Posted by John on 03/29, 01:02 PM
How about adding a vertical drop menu from various options?

And fixing the "click on slash and get wrong link" issue
Posted by Roy Johnston on 04/26, 08:17 AM
This menu works very well at the top of the page. Thanks !
Posted by San Diego on 07/02, 03:17 PM
'tis good, but not if they click in lower left ;(

I like though.
Posted by coolkid on 08/13, 11:37 AM
If you flip the image 180 degrees so that you have \ instead of /, the problem of the active corner is minimized. The UPPER left corner now exhibits the same problem, but (assuming a menu at the top of the page) it's less likely to be clicked on by the user. You have to update the CSS to show the background position as 'bottom' rather than 'top' if you do this.
Posted by Rebecca on 05/09, 03:40 AM
Very nice script and looks great. Yes the lower right issue could be a prob. I was able to get around it by doing the following, but it does space it out a bit:

in css section "#slantedmenu ul li{" add:
padding-left: 4px;
padding-right: 4px;


in html code add 3 nonbreaking spaces on each side of the anchor tag, like this:
<li>[add nbsp *3 here]<a>*</a>[add nbsp *3 here]</li>
Posted by Lawrence on 05/14, 09:42 PM
I had to move the FONT tags from '#slantedmenu' to '#slantedmenu ul li a' in order to get the correct sizing changes on my test page.
Posted by Jonna on 07/23, 08:14 AM

Comment Pages 2 of 3 pages  <  1 2 3 >


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