Наверняка многие из вас сталкивались с блогами где за место основного меню, вы могли видеть плавающее вертикальное меню, такой вариант меню используют администраторы, которые создают страницу портфолио, как говориться нечего лишнего, я думаю многим администраторам своих блогов, пригодиться подобное готовое решения.
Шаг-1 JS:
Так как на страницу вашего сайта uCoz автоматически установил библиотеку Jquery, то мы установим лишь скрипт после тега <body>:
JS
<script type="text/javascript" src="http://ucoz-helper.ucoz.com/js_jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript">
function FloatMenu(){
var animationSpeed=1500;
var animationEasing='easeOutQuint';
var scrollAmount=$(document).scrollTop();
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$('#fl_menu').height()+$('#fl_menu .menu').height()){
$('#fl_menu').css('top',menuPosition);
} else {
$('#fl_menu').stop().animate({top: newPosition}, animationSpeed, animationEasing);
}
}
$(window).load(function() {
menuPosition=$('#fl_menu').position().top;
FloatMenu();
});
$(window).scroll(function () {
FloatMenu();
});
jQuery(document).ready(function(){
var fadeSpeed=500;
$("#fl_menu").hover(
function(){ //mouse over
$('#fl_menu .label').fadeTo(fadeSpeed, 1);
$("#fl_menu .menu").fadeIn(fadeSpeed);
},
function(){ //mouse out
$('#fl_menu .label').fadeTo(fadeSpeed, 0.75);
$("#fl_menu .menu").fadeOut(fadeSpeed);
}
);
});
</script>
Шаг-2 Html:
В начало страницы устанавливаем:
- основной контейнер div
- в который помещаем ячейку div, с названием ячейки Навигация
- основной контейнер с разделами навигации
- ссылки на нужную страницу с прописанным классом menu_item
HTML-Code
<div id="fl_menu">
<div class="label">Навигация</div>
<div class="menu">
<a href="#" class="menu_item">Проверка</a>
<a href="#" class="menu_item">Проверка</a>
<a href="#" class="menu_item">Проверка</a>
<a href="#" class="menu_item">Проверка</a>
<a href="#" class="menu_item">Проверка</a>
<a href="#" class="menu_item">Проверка</a>
</div>
</div>
Шаг-3 CSS:
Устанавливаем css стили в которых всё просто, цвет ячеек и настройки текста, стоит обратить внимание на то, что мы используем для основного контейнера div, атрибут z-index:9999;, который отображает наш контейнер поверх остального кода html.
CSS-Code
#fl_menu {
position:absolute;
top:30px;
left:0px;
z-index:9999;
width:150px;
}
#fl_menu .label{
text-align:center;
font: 14px Verdana,Arial,Helvetica, sans-serif; color:#fff; font-weight: bold; color:#fff;
background:#000;
padding: 10px 0px 10px 0px;
}
#fl_menu .menu{
display:none;
}
#fl_menu .menu .menu_item {
display:block;
background:#5A5A5A;
border-top:1px solid #333;
padding: 5px 0px 5px 35px;
font: 12px Verdana,Arial,Helvetica, sans-serif; color:#fff; color:#bbb;
text-decoration:none;
}
#fl_menu .menu a.menu_item:hover {
background:#333;
color:#fff;
}
Вот в целом и всё, я думаю данное решение пригодиться тем администратором, у которых блог, состоит из одной основной колонки, тем более в данное решение, за место меню, можно добавить нужный вам модуль, например чат или опрос.
· 
19:00
