当前位置：首页 > article >正文

jquery固定折叠侧边栏菜单插件

article 2024/12/27 20:50:52

这是一款jquery固定折叠侧边栏菜单插件。该则跌侧边栏采用扁平化设计，通过折叠可以展开和收缩多级菜单，适合用于制作网站后台的侧边栏。
在这里插入图片描述
在线预览下载

使用方法

在页面中引入jquery，以及nav.css和nav.js文件。

<link href="css/iconfont.css" rel="stylesheet">                  
<link href="css/nav.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>

HTML结构
该jquery固定折叠侧边栏菜单的HTML结构如下：

<div class="nav">
    <div class="nav-top">
        <div id="mini" style="border-bottom:1px solid rgba(255,255,255,.1)"><img src="images/mini.png" ></div>
    </div>
    <ul>  
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_1"></i><span>网站配置</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li><a href="javascript:;"><span>网站设置</span></a></li>
                <li><a href="javascript:;"><span>友情链接</span></a></li>
                <li><a href="javascript:;"><span>分类管理</span></a></li>
                <li><a href="javascript:;"><span>系统日志</span></a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_2"></i><span>文章管理</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li><a href="javascript:;"><span>站内新闻</span></a></li>
                <li><a href="javascript:;"><span>站内公告</span></a></li>
                <li><a href="javascript:;"><span>登录日志</span></a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="javascript:;"><i class="my-icon nav-icon icon_3"></i><span>订单管理</span><i class="my-icon nav-more"></i></a>
            <ul>
                <li><a href="javascript:;"><span>订单列表</span></a></li>
                <li><a href="javascript:;"><span>打个酱油</span></a></li>
                <li><a href="javascript:;"><span>也打酱油</span></a></li>
            </ul>
        </li>
    </ul>
</div>