目前,网上导航菜单弹出子菜单的效果已经普及,但是有的网站做得还不够精细,用户体验并不是很好,比如从子菜单转到主菜单时,有时子菜单会出现跳跃,即:子菜单从有到无,再从无到有,从而出现了这些小bug。
最近,重新写了一下这个小效果,布局方面即主菜单div1和子菜单div2,js代码方面用到了定时器,让子菜单的隐藏动作不完成的太快速,而是通过定时器给它一个延时,这期间如果有要继续让它显示的动作,则把定时器清除。最终整理代码时的经验:
1.子菜单显示必须马上,且同时清空一下隐藏子菜单的定时器;
2.子菜单隐藏不能马上,必须延时,方便调用鼠标的其他事件。
具体HTML代码如下:
<div id="div1">我的应用</div>
<div id="div2">
<ul>
<li>魔兽</li>
<li>拳皇</li>
<li>反恐</li>
</ul>
</div>
CSS:
div {
float:left;
margin:10px;
}
#div1{
font-size:20px;
width:100px;
height:30px;
line-height:30px;
text-align:center;
color:white;
background-color:red;
}
#div2{
width:150px;
height:100px;
background-color:green;
color:white;
display:none;
}
Javascript:
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
oDiv1.onmouseover = oDiv2.onmouseover = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
};
oDiv1.onmouseout = oDiv2.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = 'none';
}, 600);
};
看上去很简单,考虑不周全,小bug还是很难搞。