jQuery实用侧边下拉收缩菜单特效代码下载


jQuery实用侧边下拉收缩菜单特效代码下载
jQuery实用侧边下拉收缩菜单特效代码下载以及实用侧边、下拉收缩菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/left-side-menu.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="js/left-side-menu.js"></script>

3. HTML代码

<div class ="top"  style="width: 100%;height: 80px;background-color: #397bc5"></div>
<div class="left-side-menu" >
    <div class="lsm-expand-btn">
        <div class="lsm-mini-btn">
            <label>
                <input type="checkbox" checked="checked">
                <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="50" cy="50" r="30" />
                    <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55" />
                    <path class="line--2" d="M0 50h80" />
                    <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45" />
                </svg>
            </label>
        </div>
<!--        <input type="text"/>-->
    </div>
    <div class="lsm-container">
        <div class="lsm-scroll" >
            <div class="lsm-sidebar">
                <ul>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_1"></i><span>系统设置</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>地爆天星</span></a></li>
                            <li><a class="active"  href="javascript:;"><span>无线月读</span></a></li>
                            <li><a href="javascript:;"><span>一乐拉面</span></a></li>
                            <li class="lsm-sidebar-item">
                                <a href="javascript:;"><i class="my-icon lsm-sidebar-icon "></i><span>二级菜单11</span><i class="my-icon lsm-sidebar-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>
                                    <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>
                                    <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>
                                    <li><a href="javascript:;"><span>双蛇相杀</span></a></li>
                                </ul>
                            </li>
                            <li class="lsm-sidebar-item">
                                <a href="javascript:;"><i class="my-icon lsm-sidebar-icon "></i><span>二级菜单22</span><i class="my-icon lsm-sidebar-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>
                                    <li><a href="javascript:;"><span>飞雷神之术</span></a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_2"></i><span>网络设置</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>地爆天星1</span></a></li>
                            <li><a href="javascript:;"><span>神罗天征1</span></a></li>
                            <li><a href="javascript:;"><span>八门遁甲1</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>退出系统</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国2</span></a></li>
                            <li><a href="javascript:;"><span>沙之国3</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者3</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-iconset0308"></i><span>购物车管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国4</span></a></li>
                            <li><a href="javascript:;"><span>沙之国4</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者4</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi1"></i><span>支付中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国5</span></a></li>
                            <li><a href="javascript:;"><span>沙之国5</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者5</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi"></i><span>充值中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国6</span></a></li>
                            <li><a href="javascript:;"><span>沙之国6</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者6</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi-copy"></i><span>充值中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国7</span></a></li>
                            <li><a href="javascript:;"><span>沙之国7</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者7</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-users"></i><span>用户管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国8</span></a></li>
                            <li><a href="javascript:;"><span>沙之国8</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者8</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国9</span></a></li>
                            <li><a href="javascript:;"><span>沙之国9</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者9</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国10</span></a></li>
                            <li><a href="javascript:;"><span>沙之国10</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者10</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国11</span></a></li>
                            <li><a href="javascript:;"><span>沙之国11</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者11</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国12</span></a></li>
                            <li><a href="javascript:;"><span>沙之国12</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者12</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国13</span></a></li>
                            <li><a href="javascript:;"><span>沙之国13</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者13</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国14</span></a></li>
                            <li><a href="javascript:;"><span>沙之国14</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者14</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国15</span></a></li>
                            <li><a href="javascript:;"><span>沙之国14</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者15</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国13</span></a></li>
                            <li><a href="javascript:;"><span>沙之国16</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者16</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国17</span></a></li>
                            <li><a href="javascript:;"><span>沙之国18</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者18</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国109</span></a></li>
                            <li><a href="javascript:;"><span>沙之国45</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者45</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国453</span></a></li>
                            <li><a href="javascript:;"><span>沙之国45</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国45</span></a></li>
                            <li><a href="javascript:;"><span>沙之国45</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者45</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>退出系统</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国2</span></a></li>
                            <li><a href="javascript:;"><span>沙之国3</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者3</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-iconset0308"></i><span>购物车管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国4</span></a></li>
                            <li><a href="javascript:;"><span>沙之国4</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者4</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi1"></i><span>支付中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国5</span></a></li>
                            <li><a href="javascript:;"><span>沙之国5</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者5</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi"></i><span>充值中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国6</span></a></li>
                            <li><a href="javascript:;"><span>沙之国6</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者6</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-chongzhi-copy"></i><span>充值中心</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国7</span></a></li>
                            <li><a href="javascript:;"><span>沙之国7</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者7</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon-users"></i><span>用户管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国8</span></a></li>
                            <li><a href="javascript:;"><span>沙之国8</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者8</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国9</span></a></li>
                            <li><a href="javascript:;"><span>沙之国9</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者9</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国10</span></a></li>
                            <li><a href="javascript:;"><span>沙之国10</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者10</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国11</span></a></li>
                            <li><a href="javascript:;"><span>沙之国11</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者11</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>订单管理</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国45</span></a></li>
                            <li><a href="javascript:;"><span>沙之国45</span></a></li>
                            <li><a href="javascript:;"><span>火影忍者45</span></a></li>
                        </ul>
                    </li>
                    <li class="lsm-sidebar-item">
                        <a href="javascript:;"><i class="my-icon lsm-sidebar-icon icon_3"></i><span>最后一条</span><i class="my-icon lsm-sidebar-more"></i></a>
                        <ul>
                            <li><a href="javascript:;"><span>火之国</span></a></li>
                            <li><a href="javascript:;"><span>最后一条子菜单</span></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

相关推荐

发表评论

相关文章