SnazzyMenu.js是一个轻量级但可自定义的jQuery插件，它可以轻松地为您的网站导航创建一个响应灵敏、粘性强的多级大菜单。

它会自动将下拉菜单转换为移动或平板设备上的汉堡导航。您可以很容易地在JavaScript中自定义断点。

香草JavaScript版本现已在这里提供：响应式粘性超级菜单SnazzyMenu.js

如何使用它:

1.要开始，请在页面上包含jQuery库和SnazzyMenu.js插件的文件。

<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.使用嵌套的HTML列表为超级菜单创建多列下拉列表，如下所示：

<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.调用顶部容器上的插件并完成。

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

4.在超级菜单中的每个列表项（列）中添加唯一的类名，然后可以在这些菜单项中附加或预附加自定义元素。

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.确定超级菜单应在哪个断点处变成移动友好型。默认值：1024。

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

6.确定移动汉堡导航的位置。默认值：“left”。

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

7.确定是否在滚动时将超级菜单粘到顶部。默认值：true。

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

8.自定义主页（徽标）图标。

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.自定义“位置”按钮。

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

10.自定义电话按钮。

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

11.确定是否在网络视图中显示汉堡包切换按钮。默认值：true。

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

12.自定义切换按钮。默认值：插入符号“”。

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

更新日志：

2022-02-24

• 使现代化

2022-02-05

• 更多样式更改

2021-07-28

• 更多样式更改

2021-07-27

• 微小更改/文件重命名

2021-06-16

• 微小的变化

2021-06-15

• 替换图像/样式更改

2021-06-05

• 删除未使用的@关键帧
• 次要样式更改

2021-06-04

• 已更新

2021-04-29

• 添加了加号/插入符号移动切换设置，更改了移动下拉列表li的样式，其他。

2021-02-24

• 添加了一个在网页视图中显示/隐藏汉堡包切换按钮的选项。

2021-01-27

• 修复了.打开类在窗口调整大小/小样式更改时保持不变的问题

2021-01-26

• 已将设置homeImage更改为homeBtn

 

预览截图

响应式粘性超级菜单插件 jQuery SnazzyMenu