导航菜单

bootstrap submenu 多级下拉菜单插件

阿里云


bootstrap-submenu 是一款在原生 bootstrap Dropdowns 组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件。原生的 bootstrap 下拉菜单只有一层,通过 bootstrap-submenu 插件,可以生成多级子菜单。

使用方法

在页面中引入 bootstrap 相关文件和插件所需的相关文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="path/to/bootstrap.min.css">
  2. <link rel="stylesheet" href="path/to/bootstrap-submenu.min.css">
  3. <script src="path/to/jquery.min.js"></script>
  4. <script src="path/to/bootstrap.min.js"></script>
  5. <script src="path/to/bootstrap-submenu.min.js"></script>

HTML 结构

制作多级下拉菜单的 HTML 结构如下:

  1. <div class="dropdown">
  2.   <button class="btn btn-default" type="button" data-toggle="dropdown">
  3.   Dropdown
  4.   <span class="caret"></span>
  5.   </button>
  6.  
  7.   <ul class="dropdown-menu" role="menu">
  8.     <li><a tabindex="0">Action</a></li>
  9.     <li class="dropdown-submenu">
  10.       <a tabindex="0" data-toggle="dropdown">二级菜单</a>
  11.       <ul class="dropdown-menu">
  12.         <li class="dropdown-header">Dropdown header</li>
  13.         <li><a tabindex="0">二级菜单项</a></li>
  14.         <li class="disabled"><a tabindex="0">二级菜单项</a></li>
  15.         <li><a tabindex="0">二级菜单项</a></li>
  16.       </ul>
  17.     </li>
  18.     <li><a tabindex="0">一级菜单项</a></li>
  19.     <li class="divider"></li>
  20.     <li><a tabindex="0">一级菜单项</a></li>
  21.   </ul>
  22. </div>

初始化插件

然后在页面加载完毕之后,通过下面的方法来初始化后该 bootstrap 多级下拉菜单插件。

  1. $('.dropdown-submenu > a').submenupicker();

Github 地址:https://github.com/vsn4ik/bootstrap-submenu

bootstrap submenu 多级下拉菜单插件

已有 1205 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(2)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!