Slyweb
На разработку сайта! Скидки 50%!

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

jQuery Nivo Slider

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





  • Код
  • Чистый код
  • Копировать в буфер
  1.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  2.<script type="text/javascript">
  3.$j = jQuery;
  4.$j(function(){
  5.    /*
  6.        Прилепили меню к окну
  7.    */
  8.
  9.        var ds_loaded = {};
10.        ds_loaded.sc = false;
11.        ds_loaded.sback = false;
12.        
13.        var top = jQuery("#top-menu").offset().top;
14.        var navbarliw = jQuery("#top-menu").width();
15.        var z_index = jQuery("#top-menu").css('z-index');
16.
17.        
18.        $j( window ).resize(function() {
19.            navbarliw = jQuery(".headerbar").width();
20.         if(!ds_loaded.sc) {
21.                jQuery("#top-menu").width(navbarliw);
22.            } else {
23.                jQuery("#top-menu").css("width","100%");
24.            }
25.        });
26.        
27.        function checknav(){
28.
29.         if ( !ds_loaded.sc && jQuery(window).scrollTop() > top ) {
30.                w = jQuery("#top-menu").width();
31.                
32.                $j('#top-menu').addClass('top-menu-fixed');
33.        
34.
35.                ds_loaded.sc = true;
36.                ds_loaded.sback = false;
37.            } else if(!ds_loaded.sback && jQuery(window).scrollTop() < top ) {
38.
39.             if(!ds_loaded.sback) {
40.                    $j('#top-menu').removeClass('top-menu-fixed');
41.                    
42.    
43.                        ds_loaded.sc = false;
44.                        ds_loaded.sback = true;
45.                }
46.            }
47.        }
48. if(!$j.browser.msie || ($j.browser.msie && $j.browser.version > 8)) {
49.        jQuery(window).scroll(checknav);
50.    }
51.    // The End scroll menu
52.});
53.</script>
54.
55.

        

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

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

  • Код
  • Чистый код
  • Копировать в буфер
  1.<div id="menu-top-conteiner" style="clear: both;height: 35px;">
  2.    <div id="top-menu">
  3.        <div id="top-menu-i">
  4.                    <div class="moduletable_menu">
  5.                    
  6.<ul class="menu">
  7.    <li class="item-190 active first"><a href="/" >Главная</a></li>
  8.    <li class="item-101"><a href="/home" >Тампопечать</a></li>
  9.    <li class="item-106"><a href="/krugovaya-shelkografiya" >Круговая шелкография</a></li>
10.    <li class="item-154"><a href="/lazernaia" >Лазерная гравировка</a></li>
11.    <li class="item-156"><a href="/yamap" >Мы на Яндекс Карте!</a></li>
12.    <li class="item-189"><a href="/sitemap-xml" >Карта сайта</a></li>
13.</ul>
14.        </div>
15.    
16.        </div>
17.                <div class="moduletablesearch">
18.                    <form action="/" method="post" class="inline">
19.                    <div class="searchsearch">
20.                    <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" />
21.                    <input type="hidden" name="option" value="com_search" />
22.                    <input type="hidden" name="Itemid" value="102" />
23.                    </div>
24.                    </form>
25.                </div>
26.    
27.    </div>
28.</div>
29.
30.

        

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

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

  • Код
  • Чистый код
  • Копировать в буфер
  1..top-menu-fixed{
  2.    clear: left;
  3.    left: 0;
  4.    top:0;
  5.    margin: 0;
  6.    position: fixed;
  7.    width: 100%;
  8.    z-index: 555;
  9.    box-shadow: 0 -10px 20px 13px #6586C0;
10.    opacity:0.8;
11.}
12.

        

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

  • Код
  • Чистый код
  • Копировать в буфер
  1.<link rel="stylesheet" href="/templates/souvenir/css/template.css" type="text/css" />
  2.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  3.<script type="text/javascript">
  4.$j = jQuery;
  5.$j(function(){
  6.//....... остальной код
  7.

        

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

  • Код
  • Чистый код
  • Копировать в буфер
  1.#top-menu-i ul {
  2.float:left;
  3.margin:0;
  4.padding:0;
  5.}
  6.#top-menu-i ul li.first {
  7.float:left;
  8.margin:0 15px 0 0;
  9.list-style:none;
10.}
11.#top-menu-i ul li.last {
12.float:left;
13.margin:0 15px 0 0;
14.list-style:none;
15.}
16.
17.#top-menu-i ul li {
18.float:left;
19.margin:0 15px 0 0;
20.list-style:inside;
21.padding-left: 10px;
22.}
23.

        

Александр Ермаков