当前位置:主页 > JavsScript库 > 菜单 / 导航 >

导航栏的响应式多级下拉菜单
栏目分类:菜单 / 导航   发布日期:2021-09-22   浏览次数:

一个 Vanilla JavaScript 库,可以更轻松地为跨平台 Web 应用程序的导航栏创建响应式、移动友好的多级下拉菜单。

它通过将菜单折叠成汉堡包按钮,在移动设备上提供出色的导航体验。因此,移动用户可以通过点击按钮和下拉图标轻松浏览所有菜单项。

使用:

1. 插入 dist 文件夹中的 main.css 和 main.js。

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

2. 将多级下拉菜单插入标题导航。

<header>
  <div class="nav__container">
    <div class="nav__mobile">
      <div class="nav__logo">LOGO</div>
      <div class="nav__btn">
        <a aria-label="Mobile menu" class="nav-toggle fade"><span></span><span class="mrg"></span><span class="mrg"></span></a>
      </div>
    </div>
      <nav class="menu-toggle">
        <ul class="nav__menu">
          <li><a href="">菜单选项</a></li>
          <li><a href="">菜单选项</a></li>
          <li class="dropdown"><a href="#">下拉菜单</a>
            <ul>
              <li><a href="">下拉选项 1</a></li>
              <li><a href="">下拉选项 2</a></li>
              <li><a href="">下拉选项 3</a></li>
              <li class="dropdown second-level"><a href="#">二级下拉菜单</a>
                <ul>
                  <li><a href="">下拉选项 1</a></li>
                  <li><a href="">下拉选项 2</a></li>
                  <li><a href="">下拉选项 3</a></li>
                </ul>
              </li>
              <li><a href="">下拉选项 3</a></li>
              <li><a href="">下拉选项 4</a></li>
            </ul>
          </li>
          <li><a href="">菜单选项</a></li>
          <li><a href="">菜单选项</a></li>
          <li><a href="">菜单选项</a></li>
        </ul>
      </nav>
  </div>
</header>


官方网站:https://github.com/piotr-kmita/dropdown-menu

相关热词: 下拉菜单导航栏

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库