您的位置：首页 > Web前端 > JavaScript

为了教学生，用js写的仿taobao的分类菜单效果

2016-03-04 10:34 543 查看
　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿照taobao左侧菜单----案例</title>
<style type="text/css">
#top,#content,#foot{
width:998px;
margin:auto;
}
#top{
height:240px;
}
#content{
height:2000px;
}
#foot{
height:120px;
}
#mainMenuArea{
margin-top:25px;
width:240px;
float:left;
margin-left:1px;
height:auto;
}
#mainMenuArea div{
font-size: 12px;
line-height:23px;
padding-left:15px;
border:solid 2px #fff;
}
#mainMenuArea div.hover{
border-left-color: red;
border-top-color: red;
border-bottom-color: red;
position: relative;
z-index:101;
}
#mainMenuArea div a{
text-decoration: none;
color:#000;
display:inline-block;
width:40px;
}
#mainMenuArea div a:hover{
color:red;
}
#mainMenuArea div span{
font-weight: bolder;
color:rgb(255,68,0);
float:right;
margin-right:5px;
}
.childMenu{
border:solid 2px red;
width:500px;
height:300px;
position: relative;
top:0;
left:239px;
z-index:100;
display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var currentMainMenu = null;
var currentChildMenu = null;

//完成鼠标悬停在主菜单时，将箭头隐藏
//1、先找到所有的主菜单项
var mainMenuList = document.getElementById("mainMenuArea").getElementsByTagName("div");
console.log("find mainMenu's count is:" + mainMenuList.length);
//2、在所有的主菜单项上分别订阅其onmouseover、onmouseout事件
for(var i=0;i<mainMenuList.length;i++){
//2.1订阅onmouseover（鼠标悬停事件）
mainMenuList[i].onmouseover = function(){
currentMainMenu = this;
//增加样式
currentMainMenu.setAttribute("class","hover");
//隐藏箭头
currentMainMenu.getElementsByTagName("span")[0].style.display = "none";
//显示子菜单
var childMenuIndex = this.getAttribute("data-index");
console.log("current childMenuIndex is :" + childMenuIndex);
//拼接出子菜单的ID
currentChildMenu = document.getElementById("childMenu_" + childMenuIndex);

currentChildMenu ?
currentChildMenu.style.display = "block" :
void(0);

//做到这一步算完了么？
//if(!currentChildMenu.onmouseover) {
//当鼠标移动到子菜单上时，还要维持当前的效果
currentChildMenu.onmouseover = function () {
console.log('now mouse is on childMenu:' + this.id);
currentMainMenu.setAttribute("class","hover");
currentMainMenu.getElementsByTagName("span")[0].style.display = "none";
this.style.display = "block";

};
//当鼠标从子菜单上移出后，还要恢复原样
currentChildMenu.onmouseout = function () {
currentMainMenu.setAttribute("class","");
currentMainMenu.getElementsByTagName("span")[0].style.display = "block";
this.style.display = "none";
console.log('in this code');
};
//}
};
//2.2订阅onmouseout（鼠标移出事件）
mainMenuList[i].onmouseout = function(){
//去除主菜单样式
currentMainMenu.setAttribute("class","");
//显示箭头
this.getElementsByTagName("span")[0].style.display = "block";
//要隐藏的子菜单，仍然再找一边么？
currentChildMenu ?
currentChildMenu.style.display = "none" :
void(0);
}
}
};
</script>
</head>
<body>
<div id="top">
顶部内容
</div>
<div id="content">
<div id="mainMenuArea">
<div data-index="1" class="">
<a href="#">女装</a>
<a href="#">男装</a>
<a href="#">鞋靴</a>
<a href="#">箱包</a>
<span>></span>
</div>
<div data-index="2" class="">
<a href="#">婴童</a>
<a href="#">美妆</a>
<a href="#">食品</a>
<a href="#">珠宝</a>
<span>></span>
</div>
</div>
<div id="childMenu_1" class="childMenu">

</div>
<div id="childMenu_2" class="childMenu">

</div>
</div>
<div id="foot">
脚部内容
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航