Регистрация    Войти
Авторизация

Плавающее вертикальное меню для ucoz

Плавающее вертикальное меню для ucoz

Плавающее вертикальное меню для ucoz. Наверняка многие из вас сталкивались с блогами, где за место основного меню, вы могли видеть плавающее вертикальное меню, такой вариант меню, используют администраторы, которые создают страницу с портфолио, как говориться нечего лишнего, я думаю многим администраторам своих блогов, пригодиться подобное готовое решения.

Шаг-1 JS:

Так как в страницу вашего сайта uCoz автоматически установил библиотеку Jquery, то мы установим лишь скрипы после тега :

<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


<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.

#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;
}

Вот в целом и всё, я думаю данное решение пригодиться тем администратором, у которых блог, состоит из одной основной колонки, тем более в данное решение, за место меню, можно добавить нужный вам модуль, например чат или опрос.


Внимание! У вас нет прав для просмотра скрытого текста.
Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  11-04-2011, 19:36   Просмотров: 3593   
ucoz, Плавающее, вертикальное, меню
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.