Фиксированная навигация на CSS3 и jQuery
827материалов
228тем на форуме
3003комментария
6152пользователя

Фиксированная навигация на CSS3 и jQuery


Описание:

Сегодня поговорим об очень распостраненных, на сегодняшний день, jQuery плагинах фиксированных меню, которые встречаются все чаще и чаще на страницах блогов и прочих ресурсов. Использование таких панелей навигации вполне оправдано. Одной из основных причин активного использования этих jQuery плагинов является то, что меню всегда под рукой посетителя, даже если он находится внизу страницы. К тому же фиксированное меню занимает немного места и не отвлекает внимания от основного контента. Если говорить в целом — фиксированное меню улучшает юзабилити сайта.

Установка:

Для начала скачиваем архив с нашего сайта и папку fiksirovannaja-navigacija загружаете в свой файловый менеджер.

Потом подключает CSS стили между <head></head>:
Код
<link rel="stylesheet" href="/fiksirovannaja-navigacija/my.css">

или в центральный CSS вставляете код:
Код
@import url("/fiksirovannaja-navigacija/my.css");

В нижнюю часть сайта,  перед закрывающим тегом </body> вставляете код:
Код
<div id="menu-nav">
            <a href="#0" class="menu-nav-trigger">Menu<span></span></a>
            <nav id="menu-main-nav">
            <ul>
            <li><a href="http://madeas.ru/team">team</a></li>
            <li><a href="http://madeas.ru/terms">terms</a></li>
            <li><a href="http://madeas.ru/services">services</a></li>
            <li><a href="http://madeas.ru/cases">cases</a></li>
            <li><a href="http://madeas.ru/clients">clients</a></li>
            <li><a href="http://madeas.ru/review/all">reviews</a></li>
            <li><a href="http://madeas.ru/requests/new">requests</a></li>
            </ul>
            </nav>
            </div>

И там же,  перед закрывающим тегом </body> подключаем библиотеку :
Код
jQuery(document).ready(function($){
            // browser window scroll (in pixels) after which the "menu" link is shown
            var offset = 300;

            var navigationContainer = $('#menu-nav'),
            mainNavigation = navigationContainer.find('#menu-main-nav ul');

            //hide or show the "menu" link
            checkMenu();
            $(window).scroll(function(){
            checkMenu();
            });

            //open or close the menu clicking on the bottom "menu" link
            $('.menu-nav-trigger').on('click', function(){
            $(this).toggleClass('menu-is-open');
            //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
            mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');

            });

            function checkMenu() {
            if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
            navigationContainer.addClass('is-fixed').find('.menu-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
            mainNavigation.addClass('has-transitions');
            });
            } else if ($(window).scrollTop() <= offset) {
            //check if the menu is open when scrolling up
            if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
            //close the menu with animation
            mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
            //wait for the menu to be closed and do the rest
            mainNavigation.removeClass('is-visible is-hidden has-transitions');
            navigationContainer.removeClass('is-fixed');
            $('.menu-nav-trigger').removeClass('menu-is-open');
            });
            //check if the menu is open when scrolling up - fallback if transitions are not supported
            } else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
            mainNavigation.removeClass('is-visible has-transitions');
            navigationContainer.removeClass('is-fixed');
            $('.menu-nav-trigger').removeClass('menu-is-open');
            //scrolling up with menu closed
            } else {
            navigationContainer.removeClass('is-fixed');
            mainNavigation.removeClass('has-transitions');
            }
            }            
            }
});

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 07.10.2016 в 09:00
Материал просмотрен: 906 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта