Плавающее меню на jQuery

Самый простой способ сделать любое меню плавающим по экрану или прикреплённым к верхней части экрана: 

/* Добавление классов для подсветки кода */ var $j = jQuery; $j(function(){ var ds_loaded = {}; ds_loaded.sc = false; ds_loaded.sback = false; var top = jQuery("#top-menu").offset().top; var navbarliw = jQuery("#top-menu").width(); var z_index = jQuery("#top-menu").css('z-index'); $j( window ).resize(function() { navbarliw = jQuery(".headerbar").width(); if(!ds_loaded.sc) { jQuery("#top-menu").width(navbarliw); } else { jQuery("#top-menu").css("width","100%"); } }); function checknav(){ if ( !ds_loaded.sc && jQuery(window).scrollTop() > top ) { w = jQuery("#top-menu").width(); $j('#top-menu').addClass('top-menu-fixed'); ds_loaded.sc = true; ds_loaded.sback = false; } else if(!ds_loaded.sback && jQuery(window).scrollTop() < top ) { if(!ds_loaded.sback) { $j('#top-menu').removeClass('top-menu-fixed'); ds_loaded.sc = false; ds_loaded.sback = true; } } } if(!$j.browser.msie || ($j.browser.msie && $j.browser.version > 8)) { jQuery(window).scroll(checknav); } });

С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.

Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:

<div id="menu-top-conteiner" style="clear: both;height: 35px;"> <div id="top-menu"> <div id="top-menu-i"> <div class="moduletable_menu"> <ul class="menu"> <li class="item-190 active first"><a href="/" >Главная</a></li> <li class="item-101"><a href="/home" >Тампопечать</a></li> <li class="item-106"><a href="/krugovaya-shelkografiya" >Круговая шелкография</a></li> <li class="item-154"><a href="/lazernaia" >Лазерная гравировка</a></li> <li class="item-156"><a href="/yamap" >Мы на Яндекс Карте!</a></li> <li class="item-189"><a href="/sitemap-xml" >Карта сайта</a></li> </ul> </div> </div> <div class="moduletablesearch"> <form action="/" method="post" class="inline"> <div class="searchsearch"> <input name="searchword" id="mod-search-searchword" maxlength="20" class="inputboxsearch" type="text" size="20" value="Поиск..." onblur="if (this.value=='') this.value='Поиск...';" onfocus="if (this.value=='Поиск...') this.value='';" /> <input type="hidden" name="task" value="search" /> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value="102" /> </div> </form> </div> </div> </div>

Само меню нужно обернуть в контейнер с id "menu-top-conteiner" и задать его высоту, сделано это для того чтобы при начале перемещения меню, оставшаяся часть конвента не прыгала вверх, хотя это почти и не заметно.

Скрипт jQuery очень прост, - мы меняем CSS класс для меню, тем самым прикрепляем его к верхней части окна. CSS класс называется "top-menu-fixed":

.top-menu-fixed{ clear: left; left: 0; top:0; margin: 0; position: fixed; width: 100%; z-index: 555; box-shadow: 0 -10px 20px 13px #6586C0; opacity:0.8; }

Поместите указанный класс в css файл и подключите его на странице, удобным способом, например, так:

<link rel="stylesheet" href="/templates/souvenir/css/template.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $j = jQuery; $j(function(){ //....... остальной код

CSS разметка всего меню:

#top-menu-i ul { float:left; margin:0; padding:0; } #top-menu-i ul li.first { float:left; margin:0 15px 0 0; list-style:none; } #top-menu-i ul li.last { float:left; margin:0 15px 0 0; list-style:none; } #top-menu-i ul li { float:left; margin:0 15px 0 0; list-style:inside; padding-left: 10px; }