RD Navbar Documentation

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

Ниже описаны принципы работы со скриптом

Обратите внимание: Прежде всего стоит запомнить, что RD Navbar - это прежде всего конструктор. В его разметке или стилизации нет практически никаких особенных правил. Весь принцип работы с RD Navbar сводится к стилизации и настройке соответствующих лейаутов навигации, которые также зависят исключительно от дизайна и особенностей продукта, в котором скрипт внедряется.

Git репозиторий

Прежде чем ознакомиться с информацией ниже, обязательно скачайте сам скрипт и демо из нашего публичного репозитория: Кликабельно

Принципы работы со скриптом

HTML Разметка для создания навигации может быть совершенно любой. Все зависит исключительно от дизайна шаблона и фантазии кодера. Тем не менее, все элементы навигации должны располагаться внутри блока с классом .rd-navbar


<!-- RD Navbar -->
<nav class="rd-navbar">
    ...
</nav>
<!-- END RD Navbar-->

Принцип работы с навбаром основан на использовании различных лейаутов. В демо, для примера, показано, как одна и также разметка выглядит в мобильном (.rd-navbar-fixed) и десктопном (.rd-navbar-static) лейаутах. Сами названия лейаутов также могут быть совершенно любыми, на усмотрение разработчика.

В общем виде, реализация любой навигации в шаблоне с использованием RD Navbar сводится к использованию следующих функциональных единиц скрипта:

Настройка лейаутов навбара для соответствующих разрешений
Настройка прилипающей панели
Настройка навигации: выпадающие и мега- меню.
Настройка переключатей (тоглов)
Настройка линковщика
Настройка одностраничной навигации

Карта классов

RD Navbar использует некоторые css классы для отображения тех или инных изменений в навигационной панели. Полный список доступных классов представлен ниже:

.rd-navbar - основной класс для создания навбара
.rd-navbar-dropdown - класс, который используется для создания выпадающего меню
.rd-navbar-megamenu - класс, который используется для создания мегаменю
[data-rd-navbar-toggle] - дата-атрибут, который используется для создания переключателей
.rd-navbar-submenu - класс, который добавляется на родительский элемент .rd-navbar-dropdown, .rd-navbar-megamenu
.rd-navbar-submenu-toggle - класс, который используется для создания переключателя подменю.
.rd-navbar--has-dropdown - класс, который добавляется на родительский элемент .rd-navbar-dropdown
.rd-navbar--has-megamenu - класс, который добавляется на родительский элемент .rd-navbar-megamenu
.focus - класс, который добавляется на .rd-navbar-submenu при ховере мышью
.opened - класс, который добавляется на .rd-navbar-submenu при переключении отображения субменю
.rd-navbar--is-clone - класс, который добавляется на клон-элемент навбара
.rd-navbar--is-stuck - класс, который добавляется при прилипании навбара на оригинальный элемент или клон-элемент, в зависимости от настроек.

Все классы, которые не указаны в списке выше являются сугубо опциональными и никак не влияют на работу RD Navbar.

Настройка лейаутов навбара

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

Суть работы с лейаутами навбара сводится к определению специфических классов лейаутов (.rd-navbar-fixed, .rd-navbar-static, .rd-navbar-sidebar и т.д.), которые навешиваются на основной элемент навбара с классом .rd-navbar, в зависимости от текущего размера окна браузера у пользователя.

Такой подход позволяет быстро и без особых усилий выполнять полную рестилизацию навигации в зависимости от определенного разрешения.

Для создания респонсивной навигации классы лейаутов навбара определяются в специальном объекте responsive при инициализации скрипта.


...
   o = $('.rd-navbar');

   o.RDNavbar({
      responsive: {
         0: {
            layout: 'rd-navbar-fixed'
         },
         768: {
            layout: 'rd-navbar-fullwidth'
         }
         1200: {
            layout: 'rd-navbar-static'
         }
      }
   })
...

Также, в случае необходимости, можно указать дополнительные лейауты навбара, которые будут отображаться исключительно на Touch устройствах, воспользовавшись атрибутом deviceLayout.


...
   o = $('.rd-navbar');

   o.RDNavbar({
      responsive: {
         0: {
            layout: 'rd-navbar-fixed'
            deviceLayout: 'rd-navbar-fixed'
         },
         768: {
            layout: 'rd-navbar-fullwidth'
            deviceLayout: 'rd-navbar-fixed'
         }
         1200: {
            layout: 'rd-navbar-static'
            deviceLayout: 'rd-navbar-fixed'
         }
      }
   })
...

Таким образом, можно добиться эффекта соответствия стилизации навигации, например, стандарту Material Design на мобильных устройствах.

Также, в случае необходимости, можно указать responsive object с помощью HTML. Для этого необходимо указать следующие аттрибуты


<!-- RD Navbar -->
<nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fullwidth"
                        data-lg-layout="rd-navbar-static" data-deviceLayout="rd-navbar-fixed">

Настройка прилипающей панели

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


...
   o = $('.rd-navbar');

   o.RDNavbar({
      responsive: {
         0: {
            layout: 'rd-navbar-fixed',
            stickUp: false
         },
         768: {
            layout: 'rd-navbar-fullwidth',
            stickUp: true
         }
         1200: {
            layout: 'rd-navbar-static',
            stickUp: true
         }
      }
   })
...

Прилипающая панель в RD Navbar имеет два режима работы: прилипание оригинальной панели и прилипание клон-эелемента. Для определения режима прилипания необходимо воспользоваться атрибутом stickUpClone (true|false) и указать оффсет прилипания от верхней позиции навбара в настройках скрипта. При этом атрибут stickUp должен быть установлен в true.


...
   o = $('.rd-navbar');

   o.RDNavbar({
      responsive: {
         0: {
            layout: 'rd-navbar-fixed',
            stickUp: false
         },
         768: {
            layout: 'rd-navbar-fullwidth',
            stickUp: true,
            stickUpClone: true,
            stickUpOffset: '100%'
         }
         1200: {
            layout: 'rd-navbar-static',
            stickUp: true,
            stickUpClone: true,
            stickUpOffset: '100%'
         }
      }
   })
...

Так, в данном примере, для создания эффекта прилипания навбара будет использоваться его клон-версия, как только навбар будет полностью проскролен на странице.


<!-- RD Navbar -->
<nav class="rd-navbar" data-stick-up="true" data-md-stick-up="true" data-lg-stick-up="true">

Настройка навигации

RD Navbar поддерживает, как и обычные выпадающие меню, так и мегаменю.

Для того, чтобы определить соотвествующий элемент как выпадающее меню или мегаменю, необходимо воспользоваться классами .rd-navbar-dropdown и .rd-navbar-megamenu.

По мимо это, RD Navbar поддерживает настройку правил взаимодествия с пунктами меню, которые содержат подменю.

Так, например, все пункты меню с подменю, по умолчанию содержат соотвествующие переключатели для отображения подменю. Но, в случае необходимости можно указать отображение подменю и при ховере мышью. Для этого необходимо воспользоваться атрибутом focusOnHover: true для соответствующего класса лейаута навбара.

Например, на десктопном лейауте очень удобно отображать подменю при ховере, в то время, когда на мобильном - это не имеет никакого смысла. Используя, responsive объект навбара, мы очень легко можем манипулировать поведением подменю.


...
   o = $('.rd-navbar');

   o.RDNavbar({
      responsive: {
         0: {
            layout: 'rd-navbar-fixed',
            focusOnHover: false
         },
         992: {
            layout: 'rd-navbar-static',
            focusOnHover: true
         }
      }
   })
...

Также, для простоты и удобства создания навигации необходимые некоторые служебные классы на элементах и дополнительные элементы-переключатели для подменю. Данные служебные элементы и классы можно не создавать вручную. Скрипт сделает это сам, достаточно просто установить флаг domAppend: true.


...
   o = $('.rd-navbar');

   o.RDNavbar({
      domAppend: true
   })
...

Настройка переключателей (тоглов)

RD Navbar содержит очень удобную систему переключателей, которые можно применять в различных ситуациях, например, в случае, когда необходимо показывать/скрывать меню навигации или поиск, или любой другой элемент навбара.

Для создания переключателя необходимо воспользоваться следующей разметкой


...
   <button data-rd-navbar-toggle=".element-1, #element-2, [data-type='element-3']."></button>
...

, где data-rd-navbar-toggle содержит самый обычный css селектор элементов, для которых необходим переключатель.

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

Так, например, в демо, переключатели используются для отображения/скрытия меню, корзины, поиска и дропдауна с дополнительными ссылками.

Настройка линковщика

RD Navbar также поддерживает возможность линкования текущего лейаута на другие элементы. Так, например, в демо, лейаут навбара залинкован на тег html для демонстрации. Таким образом, при смене лейаута навбара, класс лейаута изменяется не только на самом навбаре, но и на залинкованых элементах с добавлением посфикса -linked.

Так, при активном лейауте .rd-navbar-fixed, на тег html будет добавлен класс .rd-navbar-fixed-linked

Данный функционал будет очень полезен для магазинов, где вне панели навигации в виде сайдбара обычно отображается фильтр продуктов. Используя линковщик RD Navbar, можно очень легко и удобно визуально поместить данный сайдбар на панель навбара в виде переключателя фильтра продуктов.

Для того, чтобы залинковать соответствующие элементы страницы вне навбара необходимо воспользоваться атрибутом linkedElements, где в качестве значения передается массив целевых HTML элементов или css селекторы для их выборки.


...
   o = $('.rd-navbar');

   o.RDNavbar({
      linkedElements: [".magento-sidebar", $('.something-else')[0]]
   })
...

Настройка одностраничной навигации

RD Navbar поддерживает функционал для создания одностраничной якорной навигации по странице.

Для реализации якорной навигации на странице необходимо в качестве значения атрибута href ссылки в навигации указать хеш тег идентификатора целевой якорной секции с атрибутом data-type="anchor".


...
   <a href="#about">About</a>
...

...
   <section id="about" data-type="anchor">
       ...
   </section>
...