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

JavaScript中的简单多级Offcanvas 菜单 - off-canvas-menu
栏目分类:菜单 / 导航   发布日期:2021-10-19   浏览次数:

一个用 vanilla JavaScript 编写的简单、移动优先、多级画布菜单。

使用:

1. 为画布外菜单创建一个嵌套的导航列表。

  <div class="off-canvas">
  <div class="off-canvas-header">
    <h4 class="off-canvas-title">
      HTML369.cn
    </h4>
    <div data-bs-dismiss="off-canvas" aria-label="Close">
      <div class="icon-close"></div>
    </div>
  </div>
 
  <div class="off-canvas-body">
    <nav>
      <ul class="list-level-0">
        <li class="list-item">
          <a class="link-level-1" href="#">
            首页
          </a>
        </li>
 
        <li class="list-item">
          <a class="link-level-1" href="#">
            服务&nbsp;<span class="link-arrow">&#8250;</span>
          </a>
          <ul class="list-level-1">
            <li class="list-item">
              <a class="link-level-2" href="#">
                用户体验设计
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                网页设计
              </a>
            </li>
            <li class="list-item">
              <a class="link-level-2" href="#">
                内容营销
              </a>
            </li>
          </ul>
        </li>
 
        <li class="list-item">
          <a class="link-level-1" href="#">
            团队&nbsp;<span class="link-arrow">&#8250;</span>
          </a>
          <ul class="list-level-1">
            <li class="list-item">
              <a class="link-level-2" href="#">
                HTML369
              </a>
            </li>
 
            <li class="list-item">
              <a class="link-level-2" href="#">
                HTML369
              </a>
            </li>
 
            <li class="list-item">
              <a class="link-level-2" href="#">
                HTML369
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>

2. 加载主样式表off-canvas-menu.css。

<link rel="stylesheet" href="css/off-canvas-menu.css" />

3. 创建一个汉堡按钮来切换画布外菜单。

<aside class="icon-open-row">
  <div class="icon-open-container">
    <div class="icon-open-col-1">
      ☰
    </div>
    <div class="icon-open-col-2">打开菜单</div>
  </div>
</aside>


官方网站:https://github.com/magnusmartin85/off-canvas-menu

相关热词: 菜单多级菜单

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