jQuery 网站背景左侧导航栏效果代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 41 14



特效描述:网站背景 左侧导航栏。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 src="js/jquery.min.js"></script>
<script 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>火之国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>火之国</span></a></li>
                            <li><a href="javascript:;"><span>最后一条子菜单</span></a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到