Dynamic Drive CSS Library- Slanted Divider Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

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:

<style type="text/css">

#slantedmenu{
font-weight: bold;
font-size: 90%;
}

#slantedmenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#slantedmenu ul{
text-indent: 10px;
padding: 3px 0;
margin: 0;
background-color: #e0e0e0;
border: 1px solid #bebebe;
text-align: left; /*set value to "center" for example to center items*/
}

#slantedmenu ul li{
display: inline;
}

#slantedmenu ul li a{
color: #494949;
padding: 3px 0;
padding-right: 25px;
margin: 0;
text-decoration: none;
background: transparent url(media/slantdivider.gif) top right no-repeat;
}

#slantedmenu ul li a:visited{
color: #494949;
} 

#slantedmenu ul li a:hover{
color: black;
}

</style>

The HTML:

<div id="slantedmenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 05/25/2006

Revision History: None

Usage Terms: Click here

Your Comments (23)

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 « First < 1 2 3

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

wow, excellent code, helped me in nick of time. thanks a lot :)

Posted by simsys on 11/06, 01:56 PM

Comment Pages 3 of 3 pages « First < 1 2 3