Наверняка многие из вас сталкивались с блогами, где за место основного меню, вы могли видеть
плавающее вертикальное меню, такой вариант меню, используют администраторы, которые создают страницу с портфолио, как говориться нечего лишнего, я думаю многим администраторам своих блогов, пригодиться подобное готовое решения, давайте взглянем на пример ниже.
Шаг-1 JS:
Так как в страницу вашего сайта uCoz автоматически установил библиотеку Jquery, то мы установим лишь скрипы после тега <body>:
JS
Code
<script type="text/javascript" src="http://www.center-dm.ru/data/jQuery/floating_menu/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
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
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;
}
Вот в целом и всё, я думаю данное решение пригодиться тем администратором, у которых блог, состоит из одной основной колонки, тем более в данное решение, за место меню, можно добавить нужный вам модуль, например чат или опрос.
Пытаться сделать все сразу — это значит ничего не сделать.Георга Лихтенберга ©
3811 | 
(4) 
