Dynamic Drive CSS Library- Slanted Divider Menu

CSS Library

CSS Layouts

Web Graphics

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

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