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

Vanilla javascript 中的多级手风琴/下拉菜单 - metismenu.js
栏目分类:菜单 / 导航   发布日期:2021-08-17   浏览次数:

这是jQuery metisMenu 插件的原生JavaScript 版本 ,可帮助您在 Web 应用程序上创建响应式、动画、可访问、手风琴/下拉导航。

特征:

  • 平滑的折叠/展开动画。

  • 启用 AJAX。

  • 兼容台式机和移动设备。

  • 事件处理程序。

  • 基于animate.css 的自定义动画。

基本用法:

使用包管理器安装 metisMenu。

# Yarn 
$ yarn add metisMenu
   
# NPM 
$ npm install metisMenu --save

在页面上包含 metisMenu 的 JavaScript 和 CSS 文件。

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

从嵌套的 HTML 列表创建多级导航,如下所示:

<ul class="metismenu" id="example"> 
  <li> 
    <a class="has-arrow" href="#" aria-expanded="false"> 
      <span class="fa fa-fw fa-github fa-lg"></span> 
      metisMenu 
    </a> 
    <ul class="collapse"> 
      <li> 
        <a href="https://github.com/onokumus/metismenujs"> 
          <span class="fa fa -fw fa-code-fork"></span> 分叉
        </a> 
      </li> 
      <li> 
        <a href="https://github.com/onokumus/metismenujs"> 
          <span class="fa fa -fw fa-star"></span>明星
        </a> 
      </li> 
      <li> 
        <a href="https://github.com/onokumus/metismenujs/issues">
          <span class="fa fa-fw fa-exclamation-triangle"></span> 问题
        </a> 
      </li> 
    </ul> 
  </li> 
  <li> 
    <a class="has-arrow" href ="#" aria-expanded="false">菜单 0</a> 
    <ul class="collapse"> 
      <li> 
        <a href="#">项目 0.1</a> 
      </li> 
      <li> 
        <a href="#">item 0.2</a> 
      </li> 
      <li> 
        <a href="http://onokumus.com">onokumus</a> 
      </li> 
      <li> 
        <a href="#">item 0.4</a> 
      </li> 
    </ul> 
  </li> 
  <li id="removable">
    <a class="has-arrow" href="#" aria-expanded="false">菜单 1</a> 
    <ul class="collapse"> 
      <li> 
        <a href="#">item 1.1< /a> 
      </li> 
      <li> 
        <a href="#">item 1.2</a> 
      </li> 
      <li> 
        <a class="has-arrow" href="#" aria-expanded=" false">菜单 1.3</a> 
        <ul class="collapse"> 
          <li> 
            <a href="#">项目 1.3.1</a> 
          </li> 
          <li> 
            <a href="#" > 项目 1。3.2</a> 
          </li> 
          <li> 
            <a href="#">项目1.3.3</a> 
          </li> 
          <li>
            <a href="#">项目 1.3.4</a> 
          </li> 
        </ul> 
      </li> 
      <li> 
        <a href="#">项目 1.4</a> 
      </li> 
      < li> 
        <a class="has-arrow" href="#" aria-expanded="false">菜单 1.5</a> 
        <ul class="collapse"> 
          <li> 
            <a href="#">item 1.5.1</a> 
          </li> 
          <li> 
            <a href="#">项目 1.5.2</a> 
          </li> 
          <li> 
            <a href="#">项目 1.5.3</a> 
          </li> 
          <li> 
            <a href="#">项目 1.5.4</a> 
          </li> 
        </ul>
      </li> 
    </ul> 
  </li> 
  <li> 
    <a class="has-arrow" href="#" aria-expanded="false">菜单 2</a> 
    <ul class="collapse" > 
      <li> 
        <a href="#">项目 2.1</a> 
      </li> 
      <li> 
        <a href="#">项目 2.2</a> 
      </li> 
      <li> 
        <a href= "#">项目 2.3</a> 
      </li> 
      <li> 
        <a href="#">项目 2.4</a> 
      </li> 
    </ul> 
  </li> 
</ul>

使用默认设置初始化导航。

document.addEventListener("DOMContentLoaded", function(event) { 
  new MetisMenu('#example'); 
});

用于自定义导航的可用选项。

document.addEventListener("DOMContentLoaded", function(event) {
  new MetisMenu('#example',{
   
      // 父触发器选择器
      parentTrigger: "li",
   
      // 子菜单选择器
      subMenu: "ul",
   
      // 启用自动折叠
      toggle: true,
   
      // 触发元素
      triggerElement: "a"
         
  });
});

事件处理程序

document.addEventListener("DOMContentLoaded", function(event) {
  new MetisMenu('#example')
    .on('show.metisMenu', function(event) {    
        console.log(event.detail.showElement);
    })
    .on('shown.metisMenu', function(event) {
        console.log(event.detail.shownElement);
     })
    .on('hide.metisMenu', function(event) {
        console.log(event.detail.hideElement);
    })
    .on('hidden.metisMenu', function(event) {
        console.log(event.detail.hiddenElement);    
    });
});

API 方法

const mm = new MetisMenu("#menu"); 
   
 // 停止并销毁metisMenu 
 mm.dispose(); 
 // 更新metisMenu 
 mm.update();



官方网站:https://github.com/onokumus/metismenujs

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