js实现上拉菜单 人性化体验
日期：2014-05-16 浏览次数：20371 次
js实现下拉菜单 人性化体验
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {margin:0; padding:0}
body {width:800px; text-align:center; margin:0 auto;}
a {width:100px; display:block; border:1px dashed red; text-decoration:none}
ul,li { width:100px; margin:0; padding:0; list-style:none}
</style>
</head>
<body >
<a href="#" onmouseover="show()" onmouseout="hide()">栏目菜单</a>
<ul id="menu" style="display:none" onmouseover="show()" onmouseout="hideme()">
<li><a href="#">菜单1</a><li>
<li><a href="#">菜单2</a><li>
<li><a href="#">菜单3</a><li>
<li><a href="#">菜单4</a><li>
<li><a href="#">菜单5</a><li>
</ul>
<script>
var flag = false; //值为false表示可以隐藏
var menu = document.getElementById("menu");
//鼠标放到栏目或菜单上面都显示，并且将flag标识为true
function show(){
flag=true;
menu.style.display = 'block';
}
//离开栏目要验证一下是否可以隐藏，如果值为true则不隐藏
function hide(){
flag=false;
setTimeout(function(){
if(flag==false) {
menu.style.display = 'none';
}
},300);
}
//离开菜单本身就直接隐藏
function hideme() {
menu.style.display = 'none';
}
</script>
</body>
</html>
?工作中同事要做这样的菜单功能，所以记录一下，方便以后使用！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
