Responsive Dropdown/Off-canvas Navigation In Vanilla JavaScript – Menue

Category: Javascript , Menu & Navigation | January 28, 2020
Author:Rainsphere
Views Total:1,423 views
Official Page:Go to website
Last Update:January 28, 2020
License:MIT

Preview:

Responsive Dropdown/Off-canvas Navigation In Vanilla JavaScript – Menue

Description:

Menue is a responsive, multi-level, cross-platform dropdown/off-canvas navigation system for both desktop and mobile.

Features:

  • Auto expands the nav to the full width and sticks it to the top of the page on scroll.
  • Auto transforms the horizontal navbar into an off-canvas side nav on mobile & tablet devices.
  • Supports unlimited levels of sub-menus. Based on nested HTML lists.

How to use it:

1. Import the compiled stylesheet and JavaScript in the document.

<link rel="stylesheet" href="style.css" />
<script src="menue.js"></script>

2. Add both desktop and mobile menus to your web page.

<header>
  <div class="desktop-menu">
      <nav class="primary-nav">
          <ul>
              <li>
                  <a href="#main1">Menu Item 1</a><span class="item-toggle-button">Toggle</span>
                  <div class="secondary-nav">
                      <ul>
                          <li>
                              <a href="#sub1">Sub Menu Item 1</a><span class="item-toggle-button">Toggle</span>
                              <div class="tertiary-nav">
                                  <ul>
                                      <li>
                                          <a href="#tert1">Tertiary Item 1</a>
                                      </li>
                                      <li>
                                          <a href="#tert2">Tertiary Item 2</a>
                                      </li>
                                  </ul>
                              </div>
                          </li>
                          <li>
                          <a href="#sub2">Sub Menu Item 2</a><span class="item-toggle-button">Toggle</span>
                              <div class="tertiary-nav">
                                  <ul>
                                      <li>
                                          <a href="#tert1">Tertiary Item 1</a>
                                      </li>
                                      <li>
                                          <a href="#tert2">Tertiary Item 2</a>
                                      </li>
                                  </ul>
                              </div>
                          </li>
                          <li><a href="#sub3">Sub Menu Item 3</a></li>
                          <li><a href="#sub4">Sub Menu Item 4</a></li>
                      </ul>
                  </div>
              </li>
              <li>
                  <a href="#main2">Menu Item 2</a><span class="item-toggle-button">Toggle</span>
                  <div class="secondary-nav">
                      <ul>
                          <li><a href="#">Sub Menu Item 1</a></li>
                          <li><a href="#">Sub Menu Item 2</a></li>
                          <li><a href="#">Sub Menu Item 3</a></li>
                          <li><a href="#">Sub Menu Item 4</a></li>
                      </ul>
                  </div>
              </li>
              <li><a href="#main3">Menu Item 3</a></li>
              <li><a href="#main4">Menu Item 4</a></li>
          </ul>
      </nav>
  </div>
  <div class="mobile-menu">
      <div class="header_bar">
          <div class="mobile-toggle">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" focusable="false">
                  <g>
                      <rect x="15" y="16" width="18" height="2"></rect>
                      <rect x="15" y="23" width="18" height="2"></rect>
                      <rect x="15" y="30" width="18" height="2"></rect>
                  </g>
              </svg>
          </div>
      </div>
      <nav class="primary-nav">
          <ul>
              <li>
                  <a href="#main1">Menu Item 1</a><span class="item-toggle-button">Toggle</span>
                  <div class="secondary-nav">
                      <ul>
                          <li>
                              <a href="#sub1">Sub Menu Item 1</a><span class="item-toggle-button">Toggle</span>
                              <div class="tertiary-nav">
                                  <ul>
                                      <li>
                                          <a href="#tert1">Tertiary Item 1</a>
                                      </li>
                                      <li>
                                          <a href="#tert2">Tertiary Item 2</a>
                                      </li>
                                  </ul>
                              </div>
                          </li>
                          <li>
                          <a href="#sub2">Sub Menu Item 2</a><span class="item-toggle-button">Toggle</span>
                              <div class="tertiary-nav">
                                  <ul>
                                      <li>
                                          <a href="#tert1">Tertiary Item 1</a>
                                      </li>
                                      <li>
                                          <a href="#tert2">Tertiary Item 2</a>
                                      </li>
                                  </ul>
                              </div>
                          </li>
                          <li><a href="#sub3">Sub Menu Item 3</a></li>
                          <li><a href="#sub4">Sub Menu Item 4</a></li>
                      </ul>
                  </div>
              </li>
              <li>
                  <a href="#main2">Menu Item 2</a><span class="item-toggle-button">Toggle</span>
                  <div class="secondary-nav">
                      <ul>
                          <li><a href="#">Sub Menu Item 1</a></li>
                          <li><a href="#">Sub Menu Item 2</a></li>
                          <li><a href="#">Sub Menu Item 3</a></li>
                          <li><a href="#">Sub Menu Item 4</a></li>
                      </ul>
                  </div>
              </li>
              <li><a href="#main3">Menu Item 3</a></li>
              <li><a href="#main4">Menu Item 4</a></li>
          </ul>
      </nav>
  </div>
</header>

3. Initialize the Menue and pass options as per your needs. That’s it.

var menueOptions = {
    // options here
};
var menue = new Menue(menueOptions);

4. Full options with default values.

var menueOptions = {

    // General Options
    firstLevelNavSelector: '.primary-nav',
    secondLevelNavSelector: '.secondary-nav',
    thirdLevelNavSelector: '.tertiary-nav',
    itemToggleButtonClass: '.item-toggle-button',
    hasSecondaryClass: 'has-secondary',
    hasTertiaryClass: 'has-tertiary',
    openClass: 'is-open',

    // Desktop Options
    desktopMenuSelector: '.desktop-menu',
    desktopStickyOffset: 50,
    desktopStickyClass: 'is-sticky',
    desktopHasSecondaryToggleButton: false,
    desktopHasTertiaryToggleButton: false,

    // Mobile Options
    mobileMenuSelector: '.mobile-menu',
    mobileToggleSelector: '.mobile-toggle',
    mobileAnimatingClass: 'is-animating',
    mobileDisplayDelay: 200,
    mobileOpenBodyClass: 'mobile-menu-open',
    mobileHasSecondaryToggleButton: false,
    mobileHasTertiaryToggleButton: false

};

var menue = new Menue(menueOptions);

5. Callback functions available.

var menueOptions = {

    onDesktopStickyChange: function(instance){
        console.log('Sticky Change Callback');
    },
    onMobileToggleClick: function(toggle, instance){
        console.log('Mobile Toggle Click');
    },
    onDesktopPrimaryToggleClick: function(toggle, instance){
        console.log('Desktop Primary Toggle Click');
    },
    onDesktopSecondaryToggleClick: function(toggle, instance){
        console.log('Desktop Secondary Toggle Click');
    },
    onMobilePrimaryToggleClick: function(toggle, instance){
        console.log('Mobile Primary Toggle Click');
    },
    onMobileSecondaryToggleClick: function(toggle, instance){
        console.log('Mobile Secondary Toggle Click');
    },
    onMobilePrimaryAnchorClick: function(anchor, instance){
        console.log('Mobile Primary Anchor Click');
    },
    onMobileSecondaryAnchorClick: function(anchor, instance){
        console.log('Mobile Secondary Anchor Click');
    }

};

var menue = new Menue(menueOptions);

6. Override the default styles in the scss files under the SRC folder and then compile the style.scss to style.css.

You Might Be Interested In:


Leave a Reply