Home

CSS Examples Dashed Vertical Menu

Date: 05/14/2005 Dashed Vertical Menu

Author:

A simple yet elegant list based vertical menu. Move the mouse over a link, and the link area changes color. A thin dashed border follows each menu item.

The CSS:

<style type="text/css">

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu h1 {
display: block;
background-color:#FF9900;
font-size: 90%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

</style>

The HTML:

<div id="vertmenu">
<h1>Navigation</h1>
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">About Us</a></li>
<li><a href="#" tabindex="3">Computing</a></li>
<li><a href="#" tabindex="4">Web Sites</a></li>
<li><a href="#" tabindex="5">Games</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>

Comments (42)

One good example :)

#1: snapshot on 05/29 at 02:40 PM

I love this CSS menu! Can i freely use it?

With kind regards

Ronny Henri

#2: Ronny Henri on 06/02 at 01:35 AM

This is a refreshing menu compared to all the other straighline menu system. It would be even better if we can see a submen option too!

#3: Pay Per Call Advertising on 06/26 at 12:27 PM

what a beautiful, thanks alot

#4: Marmaraweb on 07/03 at 03:52 PM

Guys! Your site is great! This is something I've been looking for so long!

Thank you

#5: Peter on 07/10 at 02:40 PM

worked great! thanks for the post!

#6: melinda on 08/05 at 11:35 AM

it is very simple and stylish, beautiful menu.

#7: egor-egorrr on 08/25 at 03:08 PM

very nice, simple and good

#8: vijay on 10/03 at 04:34 AM

Nice one, i'm going to use it.

#9: Saku on 10/03 at 06:37 AM

Stuart created such a nice css vertical menu, I combined his css menu with another css menu that has 3 levels and got the following. You can add in as many 1rst level menus as you like, but you can only go 3 levels deep. Just cut and paste the code below, and enjoy. Thanks Stuart.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A Thanks to Stuart</title>
<style type="text/css">

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#nav, #nav ul { /* all lists */
list-style: none;
margin: 0px;
padding: 0px;
border: none;
width : 12em;
background-color:#FFFFFF; /* Background color between the brown dashed lines */
}

#nav li { /* all list items */
position : relative;
float : left;
line-height : 1.25em;
width: 11em;
}

#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 12.75em; /* Moves sub menus right or left. Larger # moves right */
margin-top : -1.80em; /* Moves sub menu up or down. bigger -# higher it goes*/
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}

#nav li ul ul { /* third-and-above-level lists */
left: -999em;
}

#nav li a {
display: block;
padding: 3px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:149px;
background-color: #FFFFFF; /* Background color of the entire menu */
border-bottom: 1px dashed #C39C4E;
}

#nav li a:hover {
color : black; /* Color of rollover font */
background-color : #eeeeee; /* Background color of rollover link */
border-bottom: 1px dashed #C39C4E;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
margin-left : 12em;
}
</style>
</head>

<body>

<ul id="nav">
<li>Home
<!-- -->
<li>Menu 1
<ul>
<li>Menu 1a
<ul>
<li>Menu 1a1</li>
<li>Menu 1a2</li>
<li>Menu 1a3</li>
<li>Menu 1a4</li>
<li>Menu 1a5</li>
<li>Menu 1a6</li>
<li>Menu 1a7</li>
<li>Menu 1a8</li>
<li>Menu 1a9</li>
</ul>
</li>
<li>Menu 1b</li>
</ul>
</li>
<!-- -->
<li>Menu 2
<ul>
<li>Menu 2a</li>
<li>Menu 2b</li>
<li>Menu 2c</li>
<li>Menu 2d</li>
</ul>
</li>
<!-- -->
<li>Menu 3

</li>
<!-- -->
<li>Menu 4

</li>
<!-- -->
<li>Menu 5

</li>
<!-- -->
<li>Menu 6

</li>
<!-- -->
<li>Menu 7

</li>
<!-- -->
<li>Menu 8

</li>
<!-- -->
<li>Menu 9

</li>
<!-- -->
<li>Menu 10

</li>

</ul>

</body>
</html>

#10: dalek on 11/15 at 01:46 PM


NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top