Jul
29
2008
Taming lists for web PDF Print E-mail
CSS tutorials - taming list menu for webHariesDesign.com This tutorial use a standard UL containing links to create a dynamic menu with hover effects. In order to obtain the hover effects we'll let the UL provide the structure, and the anchor styles will provide most of the visual effects.

Use code below, there is ada HTML and CSS code,

 

 

 

 

 

HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.hariesdesign.com/new/#" id="current">Item one</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Item two</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Item three</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Item four</a></li>
<li><a href="http://www.hariesdesign.com/new/#">Item five</a></li>
</ul>
</div>

 

CSS

#navcontainer
{
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
/* Powered by www.HariesDesign.com */
html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

 
 
< Prev
[ Back ]

 

 

 

Gallery Photography

Must Read

Related Links

Tips and Trick
Pro Directory
Great List Directory

Login

Traffic



Msn bot last visit powered by MyPagerank.Net
Yahoo bot last visit powered by MyPagerank.Net
View blog reactions