jQuery Responsive Mega Menu Plugin in jQuery | SnazzyMenu

SnazzyMenu.js is a lightweight, customizable jQuery plugin that makes it easy to create a massive, responsive, sticky, and multi-tiered list for your site’s navigation. It automatically converts the huge dropdown menu into hamburger navigation on mobile or tablet devices.

jquery responsive mega menu, full width mega menu, mega menu jquery, responsive mega menu examples free download, hs mega menu jquery plugin

How to make use of it:

1. To get began, embrace the jQuery library and the SnazzyMenu.js plugin’s files on your web page.

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

2. Create a multi-column dropdown for the mega menu by utilizing 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 executed it.

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

4. Add distinctive class names to every record item (column) within the mega menu.

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 pleasant.

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

6. Determine the place of the mobile hamburger navigation.

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

7. Determine whether or not to not sticky the mega menu to the highest on the scroll.

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

8. Customize the Home (brand) 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: '',
  locationLabel: '8929 S Sepulveda, Ste 400 Los Angeles, CA 90045',
});

10. Customize the telephone button.

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

Reference

AttributeTypeDefaultDescription
themeString‘dark’Adds default color to nav (light, dark)
breakpointInteger1024Number in pixels to determine when the nav should turn mobile friendly
stickyBooleantrueMakes the nav sticky on the scroll
menuBtnBooleantrueShow hamburger menu button/top-level controls/ logo image (top-level menu items will be visible on click)
toggleBtnString‘caret’Options: ‘caret’ or ‘plus’. Make the .toggle dropdown icons either a caret or a plus sign for mobile viewports
homeBtnStringSet a custom image like a logo that routes to the homepage
phoneBtnStringAdds a click-to-call phone link to the top of the menu – i.e.: “18009084500”
phoneLabelString‘Call’Label (text) for the phone button
locationBtnStringAdds a location link to the top of menu – i.e.: “/location/”, ” “
locationLabelString‘Location’Label (text) for the location button
colClassesBooleanfalseAdds unique class names to each list item (column) in the mega menu in the order in which they appear

Responsive Sticky Mega Menu Plugin, SnazzyMenu JS Plugin/Github


See Demo And Download

Official Website(teloe): Click Here

This superior jQuery/javascript plugin is developed by teloe. For extra Advanced usage, please go to the official website.

Share