|
uCoz Community Archives Locked How to make sidebar menu with hover effect. (Tutorial) |
How to make sidebar menu with hover effect. |
this menu is very easy to customize just paste the following code in sidebar block and then change background, border, font color.
Code <style type="text/css"> body { margin: 0; padding: 0; line-height: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .templatemo_side_bar { float: left; width: 180px; padding: 0px 0px 0 0px; background: #4C98BE; border: 2px solid #4C98BE; } .templatemo_side_bar ul { margin: 0px; padding: 0px; } .templatemo_side_bar ul li { margin: 0px; padding: 0 0 0 0; margin-bottom: 5px; border-left: 5px solid #4C98BE; list-style: none; } .templatemo_side_bar ul li a { display: block; background: #FFFFFF; padding: 5px 0 5px 10px; color: #4C98BE; text-decoration: none; } .templatemo_side_bar ul li a:hover { color: #ffffff; background: #4C98BE; } </style> <div class="templatemo_side_bar margin_right_10"> <ul> <ul> <li><a href="http://forum.ucoz.com">Home</a></li> <li><a href="http://forum.ucoz.com">Link</a></li> <li><a href="http://forum.ucoz.com">Link</a></li> <li><a href="http://forum.ucoz.com">Link</a></li> </ul></div> How to customize ? how to change borders color ? how to change font color? how to change mouse hover color? how to change menu width? if u have any question ask me. Post edited by CreativeCollusions - Wednesday, 2011-01-05, 8:48 PM
|
| |||
| |||