左边菜单导航
Posted TTTK
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左边菜单导航相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于左边菜单导航的主要内容，如果未能解决你的问题，请参考以下文章