精美的多级侧边栏导航菜单jQuery插件

精美的多级侧边栏导航菜单jQuery插件

简介:

这是一款基于bootstrap的精美多级侧边栏导航菜单jQuery插件。该导航菜单在bootstrap样式的基础上,通过jQuery来为导航菜单绑定菜单点击事件,生成非常漂亮的多级侧边栏导航菜单。

使用方法:

在页面中引入bootstrap样式文件,sidebar-menu.css和sidebar-menu.js文件,另外还有引入font-awesome字体图标文件。

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome.min.css">
<link rel="stylesheet" href="dist/sidebar-menu.css">
<script src="dist/sidebar-menu.js"></script>

HTML结构:

在该多级侧边栏导航菜单中,如果是多级菜单,要使用li.treeview来进行包裹,单一菜单项直接使用li元素即可。

<aside class="main-sidebar">
    <section class="sidebar">
        <ul class="sidebar-menu">
            <li class="header">
                MAIN NAVIGATION
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-dashboard">
                    </i>
                    <span>
                        Dashboard
                    </span>
                    <i class="fa fa-angle-left pull-right">
                    </i>
                </a>
                <ul class="treeview-menu">
                    <li>
                        <a href="#">
                            <i class="fa fa-circle-o">
                            </i>
                            Dashboard v1
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-circle-o">
                            </i>
                            Dashboard v2
                        </a>
                    </li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-files-o">
                    </i>
                    <span>
                        Layout Options
                    </span>
                    <span class="label label-primary pull-right">
                        4
                    </span>
                </a>
                <ul class="treeview-menu" style="display: none;">
                    <li>
                        <a href="#">
                            <i class="fa fa-circle-o">
                            </i>
                            Top Navigation
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-circle-o">
                            </i>
                            Boxed
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-circle-o">
                            </i>
                            Fixed
                        </a>
                    </li>
                    <li class="">
                        <a href="#">
                            <i class="fa fa-circle-o">
                            </i>
                            Collapsed Sidebar
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-th">
                    </i>
                    <span>
                        Widgets
                    </span>
                    <small class="label pull-right label-info">
                        new
                    </small>
                </a>
            </li>
            ......
            <li>
                <a href="#">
                    <i class="fa fa-book">
                    </i>
                    <span>
                        Documentation
                    </span>
                </a>
            </li>
            <li class="header">
                LABELS
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-circle-o text-red">
                    </i>
                    <span>
                        Important
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-circle-o text-yellow">
                    </i>
                    <span>
                        Warning
                    </span>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="fa fa-circle-o text-aqua">
                    </i>
                    <span>
                        Information
                    </span>
                </a>
            </li>
        </ul>
    </section>
</aside>

初始化插件

在页面DOM元素加载完毕之后,可以通过sidebarMenu()方法来初始化该多级侧边栏导航菜单。
$.sidebarMenu(element)

或者通过插件提供的API来调用菜单:

$.sidebarMenu(element)

下载 在线预览 积分 (-2) 吐槽 (6)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/nav/7898.html

- 评论

  • 加载中,请稍候…
我要吐槽