регистрация
856материалов
3356комментариев
246тем на форуме
7124пользователя

Фиксированная навигация на 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
Материал просмотрен: 1730 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0