Wednesday, January 13, 2010
CSS Based Vertical Navigation With Mouse-Over Effect
Create following styles in your head section ;
<style type="text/css">
*{padding:0; margin:0;}
body{background:#f6f6f6; font-family:Tahoma, Geneva, sans-serif;}
ul.nav{ list-style:none inside; margin:10px; width:200px; font-size:14px; font-weight:bold;}
ul.nav li{ height:auto; margin:0; border-top:1px #9cf solid; border-bottom:1px #369 solid;}
ul.nav li a{ text-decoration:none; display:block; color:#fff; border-left:20px #069 solid; background:#09C; padding:5px 10px;}
ul.nav li a:hover, ul.nav li.active a{ text-decoration:none; display:block; color:#036; border-left:20px #09c solid; background:#ace; padding:5px 10px;}
</style>
Type the following code in your body section
<body>
<ul class="nav">
<li class="active"><a href="#">Link-1</a></li>
<li><a href="#">Link-2</a></li>
<li><a href="#">Link-3</a></li>
<li><a href="#">Link-4</a></li>
<li><a href="#">Link-5</a></li>
<li><a href="#">Link-6</a></li>
<li><a href="#">Link-7</a></li>
</ul>
</body>
</html>
Labels:
basics of css,
css html,
css navigation,
css xhtml,
learn css,
psd to css html
Subscribe to:
Posts (Atom)