Главная » Файлы » Прочие скрипты » 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 | |
Просмотров: 373 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |