Боковое меню в разноцветных тонах
Простой скрипт бокового меню в разноцветных тонах для сайтов ucoz
Фиксированное вертикальное боковое меню, красиво смотрится на лубом сайте, прост в установке.
Установка:
В шапку сайта вставляем код меню:
Код
<ul id="fixmenu">
<li class="link1"><a href="http://ucoz-mania.ru">Скрипты ucoz</a></li>
<li class="link2"><a href="#">ucoz-mania.ru</a></li>
<li class="link3"><a href="#">ucoz-mania.ru</a></li>
<li class="link4"><a href="#">ucoz-mania.ru</a></li>
<li class="link5"><a href="#">ucoz-mania.ru</a></li>
</ul>
В CSS прописываем код:
Код
ul#fixmenu {
width:200px;
position:fixed;
left:0;
top:150px;
list-style:none;
padding:0;
margin:0;
}
ul#fixmenu a {
display:none;
color:#fff;
padding:0 0 0 30px;
font-weight:bold;
font-size:16px;
text-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
ul#fixmenu li {
display:block;
width: 5px;
margin-bottom:2px;
height: 30px;
line-height: 30px;
cursor:pointer;
}
ul#fixmenu .link1 {
background:#d87928;
}
ul#fixmenu .link2 {
background:#b23b1e;
}
ul#fixmenu .link3 {
background:#6bba70;
}
ul#fixmenu .link4 {
background:#4e5c7f;
}
ul#fixmenu .link5 {
background:#f1f9d2;
}
Между head - /head прописываем:
Код
<script type="text/javascript">
$(document).ready(function(){
$("ul#fixmenu li").hover(
function () {
$(this).stop().animate({'width': '200px'},200);
$(this).children().fadeIn(200);
},function () {
$(this).stop().animate({'width': '5px'},200);
$(this).children().fadeOut(200);
});
});
</script>
