1.一般的级联菜单,当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验:我们必须在这个li元素上平行的移动鼠标,才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下,将会显示其他的二级菜单了
2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片
3.实现代码:
//前端页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无延迟菜单</title>
<!--My CSS Link-->
<link rel="stylesheet" href="../CSS/menu.css" />
<!--Jquery JS Link-->
<script src="../JS/jquery.min.js"></script>
<!--My JS Link-->
<script src="../JS/menu.js"></script>
</head>
<body>
<!--一级菜单-->
<div class="wrap">
<ul>
<li data-id="a">
<span>服装/服装/服装</span>
</li>
<li data-id="b">
<span>首饰/首饰/首饰</span>
</li>
<li data-id="c">
<span>装扮/装扮/装扮</span>
</li>
<li data-id="d">
<span>书籍/书籍/书籍</span>
</li>
<li data-id="e">
<span>零食/零食/零食</span>
</li>
<li data-id="f">
<span>油卡/油卡/油卡</span>
</li>
</ul>
</div>
<!--隐藏的二级菜单-->
<div class="sub none" id="a">
<div class="sub_content">
<dl>
<dt>
<a href="javascript:void(0);"><i>电视></i></a>
</dt>
<dd>
<a href="javascript:void(0);">品牌1</a>
<a href="">品牌2</a>
<a href="">品牌3</a>
<a href="">品牌4</a>
</dd>
</dl>
</div>
</div>
<div class="sub none" style="top: 59px;" id="b">
<div class="sub_content">
<dl>
<dt>
<a href="javascript:void(0);"><i>电视></i></a>
</dt>
<dd>
<a href="javascript:void(0);">品牌1</a>
<a href="">品牌2</a>
<a href="">品牌3</a>
<a href="">品牌4</a>
</dd>
</dl>
</div>
</div>
<div class="sub none" style="top: 89px;" id="c">
<div class="sub_content">
<dl>
<dt>
<a href="javascript:void(0);"><i>电视></i></a>
</dt>
<dd>
<a href="javascript:void(0);">品牌1</a>
<a href="">品牌2</a>
<a href="">品牌3</a>
<a href="">品牌4</a>
</dd>
</dl>
</div>
</div>
<div class="sub none" style="top: 119px;" id="d">
<div class="sub_content">
<dl>
<dt>
<a href="javascript:void(0);"><i>电视></i></a>
</dt>
<dd>
<a href="javascript:void(0);">品牌1</a>
<a href="">品牌2</a>
<a href="">品牌3</a>
<a href="">品牌4</a>
</dd>
</dl>
</div>
</div>
<div class="sub none" style="top: 149px;" id="e">
<div class="sub_content">
<dl>
<dt>
<a href="javascript:void(0);"><i>电视></i></a>
</dt>
<dd>
<a href="javascript:void(0);">品牌1</a>
<a href="">品牌2</a>
<a href="">品牌3</a>
<a href="">品牌4</a>
</dd>
</dl>
</div>
</div>
<div class="sub none" style="top: 170px;" id="f">
<div class="sub_content">
<dl>
<dt>
<a href="javascript:void(0);"><i>电视></i></a>
</dt>
<dd>
<a href="javascript:void(0);">品牌1</a>
<a href="">品牌2</a>
<a href="">品牌3</a>
<a href="">品牌4</a>
</dd>
</dl>
</div>
</div>
</body>
</html>
//CSS样式
@charset "utf-8";
/* CSS Document */
.wrap{
position:relative;
width: 200px;
left: 50px;
top: 0px;
}
ul{
list-style-type: none;
padding: 15px 0;
margin: 9;
background-color: #6c6669;
color: $fff;
border-right-width: 0;
}
ul li{
display: block;
height: 30px;
line-height:30px;
padding-left: 12px;
cursor: pointer;
font-size: 14px;
position: relative;
}
ul li:hover{
background-color: #CCC;
color:#F33;
}
.none{
display:none;
}
.sub{
width: 600px;
position:absolute;
border: 1px solid grey;
background: #f7f7f7;
box-shadow: 2px 0 5px rgba(0,0,0,.3);
left: 258px;
top: 29px; //每次加30px;
box-sizing: border-box;
margin: 0;
padding: 10px;
}
.sub .sub_content a{
font-size: 12px;
color: $666;
text-decoration: none;
}
.sub_content dd a{
border-left: 1px solid #e0e0e0;
padding: 0 10px;
margin: 4px 0;
}
.sub_content dl{
overflow: hidden;
}
.sub_content dt{
float: left;
width: 70px;
font-weight: bold;
clear: left;
position:relative;
}
.sub_content dd{
float: left;
margin-left: 5px;
border-top: 1px solid $eee;
margin-bottom: 5px;
}
.sub_content dt i{
width: 4px;
height: 14px;
font: 400 9px/14px consolas;
position: absolute;
right: 5px;
top: 5px;
}
//JS核心代码
// JavaScript Document
$(function(){
//鼠标经过子元素,显示对应的div
var activediv = "";
var timer;
var entersub = false;
$.fn.mouseenterfun = function(){
//第一次进入一级菜单
if(activediv == ""){
//显示当前需要显示的div
activediv = $(this).data('id');
$("#"+activediv).removeClass("none");
return ;
}
$li = $(this);
//先隐藏之前显示出来的div
timer = setTimeout(function(){
//如果进入了子菜单,则清除timer,实现无延迟菜单的关键
if(entersub == true){
clearTimeout(timer);
return;
}
$("#"+activediv).addClass("none");
activediv = $li.data('id');
$("#"+activediv).removeClass("none");
timer = null;
},100);
};
$(".wrap").on("mouseenter","li",$.fn.mouseenterfun);
//鼠标移出一级菜单则隐藏现在显示的二级菜单
$.fn.mouseleavefun = function(){
setTimeout(function(){
if(activediv != "" && entersub == false){
$("#"+activediv).addClass("none");
}
},10);
};
$(".wrap").mouseleave($.fn.mouseleavefun);
//判断鼠标是否移入了二级菜单中,用于同activediv变量一起进行判断是否隐藏对应的activediv
$(".sub").mouseenter(function(){
entersub = true;
}).mouseleave(function(){
entersub = false;
});
});