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

Preview:

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.

<div class="desktop-menu">
  <!-- Desktop -->
  <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>
<!-- Mobile Menu -->
<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>

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.

Changelog:

04/18/2022

• v2.0.0