เปลี่ยนสีเมนูด้วย css Simple CSS rollover lists


หน้าแรก CSS เปลี่ยนสีเมนูด้วย css Simple CSS rollover lists
Simple CSS rollover lists
Variation - current page indication

There are times when you may want to show the user what page they are on. There are many ways to achive this. One simple method is:

add id="active" to the "LI" element associated with the current page
duplicate the main rollover list rule set - "#navcontainer a"
replace "#navcontainer" with "#active"
change the background color


CSS CODE


  Code

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

#navcontainer li { margin: 0 0 .2em 0; }
#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}

#active a
{
display: block;
color: #FFF;
background-color: #600;
width: 9em;
padding: .2em .8em;
text-decoration: none;
}



HTML CODE


  Code

<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li id="active"><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>



refer: http://css.maxdesign.com.au/listutorial/roll11.htm

ขึ้นไปด้านบน