Responsive Sticky Mega Menu – SnazzyMenu.js

Preview:

Description:

This is the rewritten version of the SnazzyMenu jQuery plugin, which allows you to create responsive, sticky, mobile-friendly, fully customizable mega menus without jQuery.

How to use it:

1. Download and import the snazzyMenu’s files.

<link rel="stylesheet" href="dist/css/snazzymenu.css">
<script src="app/js/snazzymenu.js"></script>

2. Create a mega menu using nested unordered lists as follows:

<div class="snazzymenu">
  <ul class="menu">
    <li class="menu-item-has-children">
      <a href="">Menu 1</a>
      <ul class="sub-menu">
        <li class="menu-item-has-children">
          <a href="">Column 1</a>
          <ul class="sub-menu">
            <li><a href="">Menu Item 1-1-1</a></li>
            <li><a href="">Menu Item 1-1-2</a></li>
            <li><a href="">Menu Item 1-1-3</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children">
          <a href="">Column 2</a>
          <ul class="sub-menu">
            <li><a href="">Menu Item 1-2-1</a></li>
            <li><a href="">Menu Item 1-2-2</a></li>
            <li><a href="">Menu Item 1-2-3</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children">
          <a href="">Column 3</a>
          <ul class="sub-menu">
            <li><a href="">Menu Item 1-3-1</a></li>
            <li><a href="">Menu Item 1-3-2</a></li>
            <li><a href="">Menu Item 1-3-3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Menu 2</a></li>
  </ul>
</div>

3. Initialize the SnazzyMenu to create a basic mega menu on your site.

snazzyMenu.init();

4. Available options to customize the mega menu.

snazzyMenu.init({
  // 'light' or 'dark'
  theme: 'dark',
  // converts the mega menu into a dropdown menu on mobile devices
  breakpoint: 1024,
  // sticks the mega menu to the top of the page
  sticky: true,
  // style of the menu toggle button
  // 'caret' or 'plus'
  toggleBtn: 'caret',
  // home button
  homeBtn: '<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z"></path><path d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z"></path></svg>',
  // phone button
  phoneBtn: '',
  phoneLabel: 'Call',
  // location button
  locationBtn: '',
  locationLabel: 'Location',
  // sets unique column class names to columns
  setColumnClasses: false,
  // appends images to menu items
  setImages: [],
  // removes the top .controls element and shows top-level menu items on desktop viewports only
  noControls: false,
  
});