Рекомендую!

Видеокурс: "Шаблон Joomla 2.5 от А до Я"

diskboxsmall

Научитесь создавать свои собственные уникальные и профессиональные шаблоны для Joomla 2.5!

Добро пожаловать в школу Джумла!

Вы находитесь в центре обучения работы с Джумлой, одной из наиболее мощных, простых и бесплатных систем управления содержимым сайта на планете. Не важно, новичок Вы в использовании этой CMS или профессионал, Школа Джумлы откроет Вам много новых, интересных уроков и советов в видео и текстовом формате по работе с этой системой управления сайтом.  Подробнее...

ЗАГРУЗИТЬ СТАБИЛЬНУЮ ВЕРСИЮ ДЖУМЛА

Скролирующее меню на jQuery для Joomla

naggingmenuЗдравствуйте, друзья. Многие посетители сайта спрашивают, как я сделал горизонтальное меню, которое при скроллинге страницы вниз перемещается в верхнюю часть окна браузера и остается там все время. Все довольно таки просто. Для реализации данного эффекта необходимо задействовать библиотеку javascript jQuery. Вот что нужно сделать.

Для начала, скачиваем с официального сайта данную библиотеку, и копируем ее в папку со скриптами нашего шаблона. Пусть это будет папка с названием js. Итак, копируем файл библиотеки в данную папку и прикрепляем его в index.php файл шабона с помощью вот такого кода:

<script src="/templates/<?php echo $this->template ?>/js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>

Где jquery-1.7.2.min.js – имя файла библиотеки jQuery (данный файл размещен также во вложениях к данной статье).

Далее, необходимо воспользоваться скриптом nagging-menu.js, который также прикрепляем в index.php файл шабона с помощью вот такого кода:

<script src="/templates/<?php echo $this->template ?>/js/nagging-menu.js" type="text/javascript" charset="utf-8"></script>

Данный файл также размещен во вложениях к данной статье.

Пусть модуль нашего меню размещен в позиции middlemenu (как у меня на сайте). И контейнер, в котором она находится, имеет идентификатор middlemenu. Вот как это выглядит:

<div id="middlemenu">
    <jdoc:include type="modules" name="middlemenu" />
 </div>

Далее, прописываем данному контейнеру класс class="default":

<div id="middlemenu" class="default">
    <jdoc:include type="modules" name="middlemenu" />
 </div>

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

.default {
position:relative;
}

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

Далее, добавляем еще один класс fixed в файл стилей:

.fixed {
position: fixed;
top: -10px;
left: 0;
box-shadow: 0 0 10px #222222;
-webkit-box-shadow: 0 0 10px #222;
-moz-box-shadow: 0 0 10px #222;
z-index: 10000;
}

Это значит, что для данного класса прописана фиксированная позиция. К тому же, он имеет внешнюю тень толщиной 10 пикселей, сдвинут вверх также на 10 пикселей с помощью команды top и помещен на передний план, используя команду z-index.

Единственное что осталось, так это открыть скрипт nagging-menu.js и прописать название идентификатора контейнера, содержащего наше меню, то есть прописать #middlemenu:

$(function(){
    
    var menu = $('#middlemenu'),
        pos = menu.offset();
        
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});

Теперь объясню, как действует скрипт. В нормальном режиме, когда пользователь не прокручивает страницу сайта вниз в окне своего браузера, для контейнера меню с идентификатором #middlemenu применяется действия класса default.

naggingmenu1

Когда же пользователь начинает прокручивать страницу, то начинает действовать скрипт nagging-menu.js, заменяя для контейнера #middlemenu класс default на класс fixed. Таким образом, при прокрутке страницы действуют правила стилей класса fixed, которые с помощью фиксированного позиционирования помещают меню вверх окна браузера.

naggingmenu

Когда пользователь возвращается в начало страницы, то вновь начинают действовать правила класса default, которые возвращают меню в нормальный вид.

Вот в принципе и все. Надеюсь, теперь и вы сможете применить такой эффект для меню на своем сайте. Удачи.

Добавить комментарий


Защитный код
Обновить

Рекомендую!

Новые комментарии

  • Ѕingіng worship songs is good howwver that?s not the one technique to ѡorship.? Daddy mentioned ... Подробнее...  
  • Lee and Larry loved thei sixth birthdaʏ pɑrty. Thoujgh they were twins, Mommy and Daddy aat aall tіmes ... Подробнее...  
  • Mу turn, my turn.? Larry stated eagerly wiggling to get an oportunity to talk. ?I ffeel one of thhe best ... Подробнее...  
  • Ιf јob ѕecurity iss high on your listing of priorities, tgis іs oone otһer factor that is not offeeed ... Подробнее...  
  • Many thanks. Useful stuff! Подробнее...