Фиксированное боковое меню для сайта. Разноцветное, очень легкое в установке.
В шапку сайта вставляем код меню:
Код
<ul id="fixmenu">
<li class="link1"><a href="4uCoz">4uCoz.NET</a></li>
<li class="link2"><a href="#">4uCoz.NET</a></li>
<li class="link3"><a href="#">4uCoz.NET</a></li>
<li class="link4"><a href="#">4uCoz.NET</a></li>
<li class="link5"><a href="#">4uCoz.NET</a></li>
</ul>
далее в CSS прописываем код:
У нас идёт список ul. И к каждому li приписан определённый класс — цвет li. У каждого класса свой цвет. Их может быть куча.
Код
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 прописываем скрипт
Код
<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>
Перевод, доработка ucoz-mania.ru
