In this tutorial I will show you how to make vertical CSS stylish web 2.0 menu.
First, I have created background image in Photoshop:
I will use background-position to move this background up and down as pointer rolls over some link. Next thing to do is write some code in html and css. Open new html page in any application you use for web design. Inside <body> tag write yourself menu with following construction form:
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
As you created menu using Unordered list let's style it a little. Next thing to do is write or paste this code right before </head> line:
<style>
.menu {
width: 160px;
list-style: none;
padding: 0;
margin: 0;
font-family: 'Lucida Grande', Lucida, Tahoma, Verdana;
font-size: 14px;
font-weight: bold;
overflow: hidden;
}
.menu li a:link, .menu li a:visited {
text-decoration: none;
color: #fff;
background: url(menu_bg.gif) no-repeat top left;
padding: 11px 10px;
display: block;
}
.menu li a:hover, .menu li a:active {
background-position: 0 -40px;
color: #000;
}
/* IE 6 List item fix */
*html .menu li { display: inline; }
</style>
Take a look what you've got with this style.
That will be all. I hope you enjoy it and learn how easy it is to make vertical CSS menu with floating background position. Thank for your time.
discuss this topic to forum
