NavBar Menu List with CSS

The Overview:

An interactive navigation bar using CSS with rounded corners. Just put the html as an unordered list and your navigation links as list items and the CSS will do the rest! As shown here! The css will tell the browser to display this special unordered list as the menu. This utilizes a technique to have one background image with three states: normal, hover and active. The css controls the placement of the background image so when you hover, the images is displaced to show only the hover state, and likewise for the active and then returns to the normal state. This is compatible in all the browsers I have checked so far, let me know if you find any issues [thanks].

The Steps:

1. First make the html. An <ul> full of <li> elements.

2. Make the desired backgrounds. Three part background (or two) . One part ‘Normal’ state and another ‘hover’ state and optionally an ‘active’ state. Add additional backgrounds if you want anything like rounded corners, or just a header.

Top Menu Background Image

Middle Menu Background Image

Bottom Menu Background Image

3. The CSS to attach the two together

The Example:

verticalMenuCSS.html

As you can see this is a simple html unordered list with list items.

[cc lang=”html”]

• My Site
• Home
• About
• Biography
• Portfolio
• Contact

[/cc]

Here’s the magic.

[cc lang=”css”]
/*vertical Menu CSS style sheet*/

*{
list-style:none;
margin:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

.sidemenu {
width: 150px;
border: none;
}
.sidemenu li a {
height: 18px;
text-decoration: none;
}
/*Top sidemenu Item (Header and rounded corners)*/
.sidemenu li.top a:link, .sidemenu li.top a:visited {
color: #828282;
display: block;
background: url(images/menuTop.png);
background-repeat:no-repeat;
padding: 1px 0 1px 0;
font-size: 1em;
font-weight: bold;
text-align: center;
}
/* Uncomment this if you want the header to be an interactive link
.sidemenu li.top a:hover {
color: #828282;
background: url(images/menuTop.png) 0 -22px;
}
.sidemenu li.top a:active {
color: #26370A;
background: url(images/menuTop.png) 0 -44px;
}*/

/*sidemenu Item Middle*/
.sidemenu li.middle a:link, .sidemenu li.middle a:visited {
color: #5E7830;
display: block;
background: url(images/menuMiddle.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.middle a:hover {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -22px;
}
.sidemenu li.middle a:active {
color: #FFFFFF;
background: url(images/menuMiddle.png) 0 -44px;
}

/*Bottom sidemenu Item (rounded corners)*/
.sidemenu li.bottom a:link, .sidemenu li.bottom a:visited {
color: #5E7830;
display: block;
background: url(images/menuBottom.png);
background-repeat:no-repeat;
padding: 1px 0 1px 20px;
font-size: 0.8em;
}
.sidemenu li.bottom a:hover {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -22px;
}
.sidemenu li.bottom a:active {
color: #FFFFFF;
background: url(images/menuBottom.png) 0 -44px;
}
[/cc]

verticalMenuCSS.html

The Download:

verticalMenuCSS.zip