tuxedo-menu.js-实用的jQuery侧边栏菜单插件

tuxedo-menu.js是一款实用的jQuery侧边栏菜单插件。它通过animate.css来制作隐藏侧边栏的滑动效果，并且还可以和metisMenu一起结合使用。

使用方法

使用该侧边栏菜单插件需要引入jQuery、tuxedo-menu.min.js、tuxedo-menu.min.css以及animate.min.css文件。

<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/tuxedo-menu.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/tuxedo-menu.min.js"></script>    
  

HTML结构

侧边栏菜单的基本HTML结构如下：

<nav id="myMenu" class="tuxedo-menu">
    <ul>
        <li>
            <h1>Heading 1</h1>
        </li>
        <li><a href="#">Item 1</a></li>
        <li>
            <h1>Heading 2</h1>
        </li>
        <li><a href="#">Item 2</a>
            <ul>
                <li><a href="#">Item 2.1</a></li>
                <li><a href="#">Item 2.2</a>
                    <ul>
                        <li><h1>Heading 2.2.1</h1></li>
                        <li><a href="#">Item 2.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li>
            <h1>Heading 4</h1>
        </li>
        <li><a href="#">Item 4</a>
            <ul>
                <li>
                    <h1>Heading 4.1</h1>
                </li>
                <li><a href="#">Item 4.1</a></li>
            </ul>
        </li>
    </ul>
</nav>
  

然后可以创建一个用于触发隐藏侧边栏的按钮。

<span class="tuxedo-menu-trigger">☰</span>    
  

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该隐藏侧边栏插件。

jQuery('#myMenu').tuxedoMenu();    
  

配置参数

jQuery('#myMenu').tuxedoMenu({
    triggerSelector: '.tuxedo-menu-trigger',
    menuSelector: '.tuxedo-menu',
    isFixed: true
});    
  

• triggerSelector：用于触发隐藏侧边栏菜单的元素的jQuery选择器。
• menuSelector：侧边栏菜单的jQuery选择器。
• isFixed：布尔值，侧边栏菜单是否位置固定。

tuxedo-menu.js侧边栏菜单的github地址为：https://github.com/beekmanlabs/tuxedo-menu