Главная » Файлы » Прочие скрипты » jQuery

Плавающее меню в левой верхней части экрана с плавно выпадающими подпунктами на jQuery
23.06.14, 11:30:28

Скачать файл




Интересное исполнение плавающего меню. Пригодится тем, кто любит максимально экономить место на своём сайте

Для начала посмотрите ДЕМО

Установка:

После тега /head на страницах, где будет использоваться данное меню, вставляйте:
Код
<style type="text/css">
  <!--  
  #fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}  
  #fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}  
  #fl_menu .menu{display:none;}  
  #fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}  
  #fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}  
  -->  
  </style>

  <script type="text/javascript" src="/js/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>

  <div id="fl_menu">
<div class="label">Заголовок меню</div>
<div class="menu">
<a href="Ссылка на страницу" class="menu_item">Пункт 1</a>
<a href="Ссылка на страницу" class="menu_item">Пункт 2</a>
<a href="Ссылка на страницу" class="menu_item">Пункт 3</a>
<a href="Ссылка на страницу" class="menu_item">Пункт 4</a>
<a href="Ссылка на страницу" class="menu_item">Пункт 5</a>
<a href="Ссылка на страницу" class="menu_item">Пункт 6</a>
</div>
  </div>


Осталось лишь залить скрипт из прикреплённого архива в папку js

Материал подготовлен Apocalypse

Материал размещён ECCO

Категория: jQuery | Добавил: Apocalypse | Теги: верхней, Плавно, выпадающими, плавающее, на, части, экрана, подпунктами, левой, Меню
Просмотров: 262 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: