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

轻量级移动应用导航系统 - mmenu-light
栏目分类:菜单 / 导航   发布日期:2021-09-14   浏览次数:

mmenu-light 是mmenu 插件的精简版,它可以像原生移动应用程序一样更轻松地创建非画布汉堡包导航。

没有依赖,没有扩展,没有插件。只需一分钟,即可在您的 Web 应用程序中轻松实现一个非常干净且适合移动设备的导航系统。

如何使用它:

将样式表mmenu-light.css和 JavaScriptmmenu-light.js导入 HTML。

<link rel="stylesheet" href="./dist/mmenu-light.css" />
<script src="./dist/mmenu-light.js"></script>

为汉堡切换按钮创建一个锚链接。

<a href="#menu"><span></span></a>

从嵌套的 HTML 列表创建多级画布外菜单。

<nav id="menu">
  <ul>
    <li class="Selected"><a href="#">首页</a></li>
    <li><span>About us</span>
      <ul>
        <li><a href="#about/history">历史</a></li>
        <li><span>团队</span>
          <ul>
            <li><a href="#about/team/management">Management</a></li>
            <li><a href="#about/team/sales">Sales</a></li>
            <li><a href="#about/team/development">Development</a></li>
          </ul>
        </li>
        <li><a href="#about/address">地址</a></li>
      </ul>
    </li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

初始化画布外导航。可能的选择:

  • element目标元素。

  • mediaQuery:  启用导航的媒体查询。默认值:all

const menu = new MmenuLight( document.querySelector( '#menu' ), 'all');

创建一个固定的导航栏。可能的选择:

  • selectedClass:选中项的 CSS 类

  • slidingSubmenus使用滑动子菜单

  • theme: “dark”或“light

  • title:菜单标题

var navigator = menu.navigation({
    // selectedClass: 'Selected',
    // slidingSubmenus: true,
    // theme: 'dark',
    // title: 'Menu'
});

激活画布外导航。可能的选择:

  • position: ‘left’ or ‘right’

var drawer = menu.offcanvas({
    // position: 'left'
});

启用汉堡按钮以切换画布外导航。

document.querySelector( 'a[href="#menu"]' )
.addEventListener( 'click', evnt => {
  evnt.preventDefault();
  drawer.open();
});

在导航中打开一个面板。

navigator.openPanel(
  menu.querySelector( "ul" );
);

打开/关闭导航。

drawer.open();
drawer.close();

官方网站:https://github.com/FrDH/mmenu-light

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