Навигация на сайте с помощью okayNav. Руководство по использованию

Введение

okayNav - плагин для навигации на сайте, построенный по принципу "что не помещается на экране, сворачиваем в выезжающее меню".

Скачать okayNav можно перейдя по ссылке.

Навигация okayNav предназначена для постепенного сворачивания ссылок навигации на экране, вместо того, чтобы делать это для всех ссылок одновременно. Данную навигацию вы можете увидеть на этом примере:

Либо просмотрите на CodePen.

Как использовать

Добавляем код:

<header id="header">
    <a class="site-logo" href="#">
       Логотип
    </a>
    
    <nav role="navigation" id="nav-main" class="okayNav">
        <ul>
            <li><a href="#">Главная</a></li>
            <li><a href="#">Блог</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </nav>
</header>

Подключаем CSS:

<link rel="stylesheet" href="css/okayNav.css" media="screen">

Подключаем библиотеку:

<script src="js/jquery.okayNav.min.js"></script>

И вот JS, для его инициализации:

var navigation = $('#nav-main').okayNav();

Зависимости

okayNav требует подключенной библиотеки jQuery. Тестирование проходила на jQuery 1.10+, но должно работать и с более старыми версиями.

Поддержка Браузеров

okayNav поддерживается в IE9+, Firefox, Chrome. Переходы работают в IE10+.

Параметры по умолчанию

var navigation = $('#nav-main').okayNav({
    parent : '', // будет вызываться навигация parent() по умолчанию
    toggle_icon_class : 'okayNav__menu-toggle',
    toggle_icon_content: '<span /><span /><span />',
    align_right: true, // Если false, то меню и значок будет слева
    swipe_enabled: true, // Если true, то будут включено открытие меню по свайпу влево/вправо
    threshold: 50, // Автоматическое открытие/закрытие если это значение >= множеству процентов
    beforeOpen : function() {}, // Сработает до того, как навигация откроется
    afterOpen : function() {}, // Сработает после того, как навигация откроется
    beforeClose : function() {}, // Сработает до того, как навигация закроется
    afterClose : function() {}, // Сработает после того, как навигация закроется
    itemHidden: function() {}, // Сработает после перемещения элемента в скрытую навигацию
    itemDisplayed: function() {} // Сработает после перемещения элемента в видимую навигацию
});

Методы

Открытие внешней части экрана: navigation.okayNav('openInvisibleNav');

Закрытие внешней части экрана: navigation.okayNav('closeInvisibleNav');

Переключить внешнюю часть экрана: navigation.okayNav('toggleInvisibleNav');

Перерасчет то, что должно быть видно, а что нет: navigation.okayNav('recalcNav');

Получить родительский элемент навигации: navigation.okayNav('getParent');

Получить навигацию видимой части: navigation.okayNav('getVisibleNav');

Получить навигации невидимой части: navigation.okayNav('getInvisibleNav');

Получить значок переключения навигации: navigation.okayNav('getNavToggleIcon');

Получите общую ширину навигации потомков: navigation.okayNav('getChildrenWidth');

Убрать навигацию, сделать все видимым, отключить все события: navigation.okayNav('destroy');