Dynamic Drive CSS Library- Vertical Divider Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

CSS Library: Horizontal CSS Menus: Here

Vertical Divider Menu

Author: Dynamic Drive

One of the most popular CSS menu interfaces around, this is a horizontal CSS menu that uses an indented vertical divider to separate each menu item. Each item can change background color when the mouse moves over it.

Demo:

The single image used:

The CSS:

<style type="text/css">

#vdividermenu ul{
margin: 0;
padding: 0;
margin-bottom: 1em;
float: left;
font: bold 100% Tohoma;
width: 100%;
border: 1px solid #625e00;
background-color: #f9ff91;
}

* html #vdividermenu ul{ /*IE only rule, reduce menu width*/
width: 99%;
}

#vdividermenu ul li{
display: inline;
}

#vdividermenu ul li a{
float: left;
color: black;
padding: 2px 12px;
text-decoration: none;
background: transparent url(media/vertical.gif) center right no-repeat;
}

#vdividermenu ul li a:visited{
color: black;
}

#vdividermenu ul li a:hover{
color: black;
background-color: #ffe84f;
}

</style>

The HTML:

<div id="vdividermenu">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Examples">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 06/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (24)

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

How would I center this please? :)

Posted by xenos on 07/31, 04:01 PM

#vdividermenu ul li.current a{ /*selected main tab style */
background-color: #AB2356;
color: #F9DDE8;
}

Posted by Alex on 10/10, 01:00 AM

@vb user:
you have to chenge the line
background: transparent url(media/vertical.gif) center right no-repeat; to
background: transparent url(/media/vertical.gif) center right no-repeat;

Posted by rico on 11/27, 02:05 PM

This is very nice CSS menu , working great.

http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/

Posted by Wpdigger on 06/02, 10:53 PM

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

Commenting is not available in this weblog entry.