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

Now this one is Great :)
thank guys

Posted by Adel on 05/25, 07:00 PM

This is a nice menu. Very customizable in color and sizes.
Looks great!

Posted by Atolar on 05/29, 10:02 AM

great!!!!!

Posted by Richard on 06/04, 05:14 PM

This looks pretty cool, but why put the background on the <a>? Why not place it on the <li> element, that way only the text of the link is clickable rather than the text and background image...

Posted by Rob Watson on 06/22, 09:20 AM

Nice, simple and easy to use

Posted by David AC on 06/27, 06:57 AM

Simple and wonderful code, thanks!

Posted by hopeajouhi on 07/30, 06:18 AM

An attractive option to the usual vertical divider, but a user who assumes these are graphical buttons and clicks in the lower left corner of one will activate the link to the left instead, which isn't very intuitive.

Posted by Phidler Onderüf on 08/01, 09:46 AM

I agree, looks nice but can be confusing if the user clicks in the wrong part of a button.

Posted by JOR on 09/01, 10:12 AM

Nice idea from a layout point of view.
However I think the left portion of the tab activating the wrong link is a big no-no.
Might be better to use only the text as the active part of the tab.

Posted by Ezion on 09/05, 08:59 PM

i want css coding for no right option but i cann't find any so please suggest me

Posted by Pravinda Ranjit on 09/19, 11:27 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.