左边菜单导航
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title> 左边导航 </title>
- <style>
- *{margin:0;padding:0;/*background: #8d90ef;#0387e0*/text-decoration: none;list-style: none;}
- html{overflow-y: hidden;}
- a {outline: none; }
- a:focus{outline:none;}
- img{border:0;}
- body{width: 251px;}
- body>div{width: 251px;background: #87C5E1;}
- .left-top{height: 40px;line-height:40px;font-size:small;font-weight:bold;color:white;background: #87C5E1;border-bottom: 1px solid white;cursor: pointer;}
- .left-top>span{ display: inline-block; margin-left: 8px; margin-top: 7px;margin-right: 8px; float: left; width: 20px;height: 21px;background-size: 25px 25px; }
- .left-menu{width: 250px;}
- .left-menu dd span { float: left;height:25px; margin-left: 20px;margin-right: 8px;margin-top: 5px;}
- .title{cursor: pointer;width:249px;height: 35px;line-height: 35px;font-size:small;font-weight:bold;color:white;background:#87C5E1; border-bottom: 1px solid #D2D6D7;}
- .title img{width: 20px ;height: 20px;}
- .menu-son{display: none;background: white;}
- .menu-son>li{position: relative;cursor: pointer;line-height: 30px;font-size: small;}
- .header{margin-left: 40px;height: 30px;line-height: 30px;}
- .header>a{display:block;color: black;font-weight: bold;}
- .header:hover>a{color:#87C5E1;}
- .header>cite{display:block;float:left;width:16px;height:16px;margin-top:5px;}
- .header>cite:after{content: "";display:block;width: 0;height: 0;margin-top:2px;border-top:9px solid transparent;border-right:9px solid black;transform: rotate(-45deg);}
- .menu-son .active{ background: #1493B1;}
- .menu-son .active cite:after{content: "";display:block;width: 0;height: 0;margin-top:2px;border-top:9px solid transparent;border-right:9px solid white;transform: rotate(-45deg);}
- .menu-son .active i:after{position:absolute;top:8px;right: -10px;content: "";height: 3px;border-top:15px solid transparent;border-right:15px solid white;transform: rotate(135deg);z-index: 9999;}
- .menu-son .active>div a{color:white;}
- .sub-menus{display: none;background: #c9dfdd;padding: 10px 0;border-bottom: 1px solid #c8c9f7;}
- .sub-menus>li a{display:block;color: #0f0f0f;padding-left: 65px;font-weight: bold;}
- .sub-menus>li:hover>a{color: white;}
- .sub-menus>li.active{background: white;}
- .sub-menus>li.active>a{color:black;}
- </style>
- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
- <script src="//cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
- <script>
- /**
- * Created by lenovo on 2016/10/8.
- */
- $(function(){
- /* 零级菜单点击效果 */
- $(".left-top").click(function(){
- if($(this).next('.left-foot').is(':visible')){
- $(this).next('.left-foot').slideUp();
- }else{
- $(this).next('.left-foot').slideDown();
- }
- });
- /* 一级菜单点击效果 */
- $('.title').click(function(){
- var $ul = $(this).next('ul');
- $('dd').find('.menu-son').slideUp().find('.sub-menus').slideUp();
- if($ul.is(':visible')){
- $(this).next('.menu-son').slideUp();
- }else{
- $(this).next('.menu-son').slideDown();
- }
- });
- /* 二级菜单点击效果 */
- $(".menu-son .header").click(function(){
- $(".menu-son li.active").removeClass("active").find('.sub-menus').slideUp();
- $(this).parent().addClass("active");
- if( !$(this).next('.sub-menus').is(':visible')){
- $(this).next('.sub-menus').slideDown();
- }
- });
- // 三级菜单点击
- $('.sub-menus li').click(function(e) {
- $(".sub-menus li.active").removeClass("active");
- $(this).addClass("active");
- });
- /* 滚动效果 */
- $('body').bind('mousewheel', function(event, delta) {
- var step = $(window).height(); // 可视区高度
- var cur_top = $(window).scrollTop(); // 当前滚过的高度
- var direction = delta> 0 ? -1 : 1;
- var height = direction * step + cur_top;
- var x_height = Math.floor(height/step)*step; // 滚过整数倍的可视区大小
- $("html, body").stop().animate({ scrollTop: x_height }, 400);
- return false;
- });
- });
- </script>
- </head>
- <body>
- <div>
- <div class="left-top"><span></span> 通讯录 </div>
- <div class="left-foot">
- <dl class="left-menu">
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- </dl>
- </div>
- <div class="left-top"><span></span> 通讯录 </div>
- <div class="left-foot">
- <dl class="left-menu">
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- </dl>
- </div>
- <div class="left-top"><span></span> 通讯录 </div>
- <div class="left-foot">
- <dl class="left-menu">
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- <dd>
- <div class="title"><span><img src="img/leftico01.png"></span> 管理信息 </div>
- <ul class="menu-son">
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- <ul class="sub-menus">
- <li><a href="javascript:;"> 文件管理 </a></li>
- <li><a href="javascript:;"> 模型信息配置 </a></li>
- <li><a href="javascript:;"> 基本内容 </a></li>
- <li><a href="javascript:;"> 自定义 </a></li>
- </ul>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- <li>
- <div class="header">
- <cite></cite>
- <a href="#"> 首页模版 </a>
- <i></i>
- </div>
- </li>
- </ul>
- </dd>
- </dl>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/37388/2eae619b5bcb1ba15a06d73f95df592f.html