RD Navbar Documentation

How to exploit

Below are the principles of working with the script

Note: First of all, remember that RD Navbar is primarily a builder. There are practically no special rules in its layout or styling. The whole principle of working with RD Navbar is to stylize and adjust the corresponding navigation layouts, which also depend exclusively on the design and features of the product in which the script is implemented.

Git repository

Before becoming familiar with the information below, be sure to download the script itself and the demo from our public repository: Clickable

Principles of working with the script

There may be absolutely any HTML layout for the creation of navigation. Everything depends solely on the template’s design and fantasy of the coder. However, all the navigation elements should be located inside the block with the class .rd-navbar


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

The principle of working with navbar is based on the usage of various layouts. The demo, for example, shows how one and the same markup looks on the mobile (.rd-navbar-fixed) and desktop (.rd-navbar-static) layouts. The titles of layouts can also be completely diverse, and up to the developer.

In general, the realization of any navigation in the template using RD Navbar is reduced to using the following functional units of the script:

Adjustment of navbar’s layouts for the appropriate resolutions
Sticky panel setting
Navigation setting: dropdown and megamenus.
Setting switches (toggles)
Linker Adjustment
Single page navigation adjustment

Class Map

RD Navbar uses some CSS classes to display either changes in the navigation panel. The full list of available classes is as follows:

.rd-navbar - the main class for navbar creation
.rd-navbar-dropdown - the class that is used to create a dropdown menu
.rd-navbar-megamenu - the class that is used to create a megamenu
[data-rd-navbar-toggle] - the data attribute used to create the switches
.rd-navbar-submenu - the class that is added to the parent element .rd-navbar-dropdown, .rd-navbar-megamenu
.rd-navbar-submenu-toggle - the class that is used to create the switch of the submenu.
.rd-navbar--has-dropdown - the class that is added to the parent element .rd-navbar-dropdown
.rd-navbar--has-megamenu - the class that is added to the parent element .rd-navbar-megamenu
.focus - the class that is added to the .rd-navbar-submenu when the mouse is clicked on the hover
.opened - the class that is added to the .rd-navbar-submenu when switching the display of the submenu
.rd-navbar--is-clone - the class that is added to the clone-element of navbar
.rd-navbar--is-stuck - the class that is added when sticking of the Navbar to the original element or clone-element, depending on the settings.

All classes that are not listed in the list above are exclusively optional and do not affect the operation of the RD Navbar.

Adjustment of the navbar’s layouts

RD Navbar is inherently responsive. While the vast majority of third-party solutions use the backup navigation to display desktop and mobile navigation versions, RD Navbar offers a radically different solution.

The essence of working with Navbar layouts is to define specific layout classes (.rd-navbar-fixed, .rd-navbar-static, .rd-navbar-sidebar, etc.), which are hung on the main Navbar element with the class .rd- Navbar, depending on the current window size of the user’s browser.

This approach allows you to quickly and without extra effort perform a complete restyling of navigation, depending on the specific resolution.

To create a responsive navigation, navbar's layout classes are defined in a special responsive object when the script is initialized.


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

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

If necessary, you can also specify additional navbar's layouts that will be displayed exclusively on the Touch devices using the deviceLayout attribute.


...
   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'
         }
      }
   })
...

Thus, you can achieve the effect of matching navigation styling, for example, to the Material Design standard on mobile devices.

Also, if necessary, you can specify a responsive object using HTML. To do this, you should specify the following attributes


<!-- 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">

Sticky panel setting

In order to enable navbar sticking while scrolling, you need to use the attribute 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
         }
      }
   })
...

The sticky panel in the RD Navbar has two modes of operation: the original panel sticking and the clone-element sticking. To determine the sticking mode, you need to use the stickUpClone (true | false) attribute and specify the offset sticking from the top position of the navbar in the script settings. The stickUp attribute must be set in 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%'
         }
      }
   })
...

So, in this example, to create the sticking effect of Navbar, its clone version will be used as soon as the Navbar is completely scrolled on the page.

Also, if necessary, you can specify a responsive object using HTML. To do this, you must specify the following attributes


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

Navigation setting

RD Navbar supports usual drop-down menus as well as megamenus.

In order to define the appropriate element as a drop-down menu or a megamenu, you need to use the .rd-navbar-dropdown and .rd-navbar-megamenu classes.

Besides, RD Navbar supports the setting of interaction rules with menu items that contain submenus.

For example, all menu items from a submenu contain the appropriate switches for displaying the submenu, by default. But, if necessary, you can specify the submenu display no the hover using the mouse. To do this, you must use the attribute focusOnHover: true for the corresponding Navbar layout class.

For example, it's very convenient to display the submenu on the Hover on the desktop layout, while on the mobile one it does not make any sense. Using, responsive object navbar, we can very easily manipulate the behavior of the submenu.


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

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

Also, for the simplicity and convenience of the navigation creation, you need some service classes on the elements and additional switch elements for the submenu. You don’t need to create these service elements and classes manually. The script will do it itself, simply set the flag domAppend: true.


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

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

Setting switches (toggles)

RD Navbar contains a very convenient system of toggles that can be used in various situations, for example, when you need to show / hide the navigation menu or search, or any other element of navbar.

To create a switch, use the following markup


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

, where data-rd-navbar-toggle contains the most common css selector of elements for which a toggle is needed.

When the switch is activated, an .active class is hung on the element, which allows you to perform various manipulations with it: move, hide, display, zoom, etc.

For example, in the demo, the toggles are used to display / hide menus, carts, search and dropdown with additional links.

Linker Adjustment

RD Navbar also supports the ability to link the current layout to other elements. So, for example, in the demo, navbar's layout is linked to the html tag for the demonstration. Thus, when changing the Navbar's Layout, the Layout class changes not only on the Navbar itself but also on linked elements with the addition of the suffix -linked.

So, with the active .rd-navbar-fixed, the .rd-navbar-fixed-linked class will be added to the html tag.

This functional will be very useful for shops where a product filter is usually displayed outside the navigation bar in the form of a sidebar. Using the linker RD Navbar, it is very easy and convenient to visually place this sidebar on the navbar panel as a product filter switch.

In order to link the corresponding elements of the page outside the navbar, you need to use the linkedElements attribute, where an array of target HTML elements or CSS selectors for their selection is passed as the value.


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

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

Single page navigation adjustment

RD Navbar supports the functional for creating single page anchor page navigation.

To implement anchor navigation on the page, you need to specify the hash tag of the identifier of the target anchor section with the attribute data-type = "anchor" as the value of the href attribute in the navigation links.


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

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