Responsive Sticky Mega Menu Plugin For jQuery - SnazzyMenu

SnazzyMenu.js is a lightweight yet customizable jQuery plugin that makes it easy to create a responsive, sticky, multi-level mega menu for your site navigation.

It automatically converts the dropdown mega menu into a hamburger navigation on mobile or tablet devices. You can easily customize the breakpoint in JavaScript.

The Vanilla JavaScript Version is NOW AVAILABLE HERE: Responsive Sticky Mega Menu – SnazzyMenu.js

How to use it:

1. To get started, include jQuery library and the SnazzyMenu.js plugin's files on your page.

<link rel="stylesheet" href="/path/to/dist/css/style.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/snazzymenu.min.js"></script>

2. Create a multi-column dropdown for the mega menu by using nested HTML lists as follows:

<nav>
  <div class="snazzymenu">
    <ul id="menu-main-nav" class="menu">
      <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
        <a href="">Nav Item 1</a>
        <ul class="sub-menu">
          <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="">Menu 1-1</a>
          </li>
          <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="">Menu 1-2</a>
          </li>
          <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="">Menu 1-3</a>
          </li>
          <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="">Menu 1-4</a>
          </li>
        </ul>
      </li>
      <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
        <a href="">Nav Item 2</a>
        <ul class="sub-menu">
          <li id="" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
            <a href="">Menu 2-1</a>
            <ul class="sub-menu">
              <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
                <a href="">Menu 2-1-1</a>
              </li>
              <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
                <a href="">Menu 2-1-2</a></li>
              <li id="menu-item-147" class="menu-item menu-item-type-post_type menu-item-object-page">
                <a href="">Menu 2-1-3</a></li>
            </ul>
          </li>
          <li id="" class="menu-item menu-item-type-post_type menu-item-object-page">
            <a href="">Menu 2-2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

3. Call the plugin on the top container and done.

jQuery('.snazzymenu').snazzyMenu({
  // options here
});

4. Add unique class names to each list item (column) in the mega menu and then you can append or prepend custom elements to those menu items.

jQuery('.snazzymenu').snazzyMenu({
  colClasses: true
});

jQuery('.column-1').prepend('<img src="1.jpg">');
jQuery('.column-2').prepend('<img src="2.jpg">');
jQuery('.column-3').prepend('<img src="3.jpg">');

5. Determine at which breakpoint the mega menu should turn mobile friendly. Default: 1024.

jQuery('.snazzymenu').snazzyMenu({
  breakpoint: 768
});

6. Determine the position of the mobile hamburger navigation. Default: 'left'.

jQuery('.snazzymenu').snazzyMenu({
  position: 'right' // or 'top'
});

7. Determine whether or not to sticky the mega menu to the top on scroll. Default: true.

jQuery('.snazzymenu').snazzyMenu({
  sticky: true
});

8. Customize the Home (logo) icon.

jQuery('.snazzymenu').snazzyMenu({
  homeBtn: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-6v-6h-6v6h-6v-10h-3l12-12 12 12h-3zm-1-5.907v-5.093h-3v2.093l3 3z"/></svg>'
});

9. Customize the Location button.

jQuery('.snazzymenu').snazzyMenu({
  locationBtn: 'https://www.jqueryscript.net',
  locationLabel: '8929 S Sepulveda, Ste 400 Los Angeles, CA 90045',
});

10. Customize the phone button.

jQuery('.snazzymenu').snazzyMenu({
  phoneBtn: '123-456-7890',
  phoneLabel: 'Contact Us',
});

11. Determine whether to show the hamburger toggle button in web view. Default: true.

jQuery('.snazzymenu').snazzyMenu({
  menuBtn: false
});

12. Customize the toggle button. Default: caret''.

jQuery('.snazzymenu').snazzyMenu({
  toggleBtn: 'plus'
});

Changelog:

2022-02-24

• Update

2022-02-05

• more style changes

2021-07-28

• more style changes

2021-07-27

• minor changes/file rename

2021-06-16

• minor change

2021-06-15

• replace images/style changes

2021-06-05

• remove unused @keyframes
• minor style changes

2021-06-04

• Updated

2021-04-29

• Added plus/caret mobile togglebtn setting, changed styles for mobile dropdown li, misc.

2021-02-24

• Added an option to show/hide the hamburger toggle button in web view.

2021-01-27

• fix .open class persisting on window resize/ minor style changes

2021-01-26

• changed settings homeImage to homeBtn

 

---

This awesome jQuery plugin is developed by teloe. For more Advanced Usages, please check the demo page or visit the official website.