Bootstrap左侧下拉三级菜单

在线实例

使用方法

<script src="/api/jq/BootstrapCaidan/js/metismenu.js"></script>
<script>
    $(function () {
        $('#menu').metisMenu();
    });
</script>

Usage

1. Include metismenu StyleSheet

   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.6.1/metisMenu.min.css">

   <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.metismenu/2.6.1/metisMenu.min.css">

2. Include jQuery

   <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

   <script src="//cdn.jsdelivr.net/jquery/2.2.4/jquery.min.js"></script>

3. Include metisMenu plugin's code

   <script src="//cdnjs.cloudflare.com/ajax/libs/metisMenu/2.6.1/metisMenu.min.js"></script>

   <script src="//cdn.jsdelivr.net/jquery.metismenu/2.6.1/metisMenu.min.js"></script>

4. Add class metismenu to unordered list

   <ul class="metismenu" id="menu"> </ul>

5. Make expand/collapse controls accessible

   Be sure to add aria-expanded to the element a and the following ul. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of aria-expanded="false". If you've set the collapsible element's parent li element to be open by default using the active class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

   <ul class="metismenu" id="menu">
     <li class="active">
       <a href="#" aria-expanded="true">Menu 1</a>
       <ul aria-expanded="true">
       ...
       </ul>
     </li>
     <li>
       <a href="#" aria-expanded="false">Menu 2</a>
       <ul aria-expanded="false">
       ...
       </ul>
     </li>
     ...
     </ul>

6. Arrow Options > add has-arrow class to a element

<ul class="metismenu" id="menu">
  <li class="active">
    <a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
    <ul aria-expanded="true">
    ...
    </ul>
  </li>
  <li>
    <a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
    <ul aria-expanded="false">
    ...
    </ul>
  </li>
  ...
  </ul>

1. Call the plugin:

   $("#menu").metisMenu();

Stopping list opening on certain elements

Setting aria-disabled="true" in the <a> element as shown will stop metisMenu opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:

<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>

Options

toggle

Type: Boolean Default: true

For auto collapse support.

 $("#menu").metisMenu({
   toggle: false });

dispose

Type: String Default: null

For stop and destroy metisMenu.

 $("#menu").metisMenu('dispose');

activeClass

Type: String Default: active

 $("#menu").metisMenu({
   activeClass: 'active' });

collapseClass

Type: String Default: collapse

 $("#menu").metisMenu({
   collapseClass: 'collapse' });

collapseInClass

Type: String Default: in

 $("#menu").metisMenu({
   collapseInClass: 'in' });

collapsingClass

Type: String Default: collapsing

 $("#menu").metisMenu({
   collapsingClass: 'collapsing' });

doubleTapToGo

Type: Boolean Default: false

For double tap support.

 $("#menu").metisMenu({
   doubleTapToGo: true });

The doubleTapToGo option will be deprecated in the next release.

preventDefault

Type: Boolean Default: true

Prevents or allows dropdowns' onclick events after expanding/collapsing.

 $("#menu").metisMenu({
   preventDefault: false });

Events

https://github.com/onokumus/metisMenu

云盘内容

注意：示例只是当前的内容，【下载】的是全部jQuery插件一起打包后的文件。