您的位置：首页 > 运维架构 > 网站架构

web前端-二级分类菜单（类似购物网站）

2016-07-19 18:05 531 查看

效果：鼠标移上去右边显示二级菜单。

效果图：

实现代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#nav{
width:100%;
height:420px;
background-color:lightgrey;
}
#nav1{
height:420px;
width:1200px;
background-color:lightblue;
margin:0 auto;
}
#nav1 .menu{
width:190px;
height:420px;
background:black;
float:left;
}
#nav1 .flash{
width:820px;
height:420px;
background:palevioletred;
float:left;
}
#nav1 .news{
width:190px;
height:420px;
background:greenyellow;
float:left;
}
#nav1 .menu ul li{
list-style-type:none;
width:190px;
height:69px;
border-bottom:1
4000
px solid #1e1e1d;
color:whitesmoke;
text-indent:20px;
position:relative;
}
#nav1 .menu ul li p{
font-size:14px;
color:whitesmoke;
}
/*构建二级菜单*/
.menu ul li .more{
width:300px;
height:400px;
background:black;
position:absolute;
left:189px;
border:1px solid gray;
display:none;
}
.menu ul li .border_top{
height:1px;
background:gray;
width:190px;
position:absolute;
top:-1px;
display:none;
}
.menu ul li .border_bottom{
height:1px;
background:gray;
width:190px;
position:absolute;
bottom:-1px;
display:none;
}
.menu ul li .border_right{
height:70px;
background:black;
width:1px;
position:absolute;
right:0px;
bottom:-1px;
display:none;
}
#nav1 .menu ul li.hover .more{
display:block;
}
#nav1 .menu ul li.hover .border_top{
display:block;
}
#nav1 .menu ul li.hover .border_bottom{
display:block;
}
#nav1 .menu ul li.hover .border_right{
display:block;
}

</style>
</head>
<body>
<div id="nav">
<div id="nav1">
<div class="menu">
<ul>
<li>
<div class="more"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<div class="more"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<div class="more"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<div class="more"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<div class="more"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
<li>
<div class="more"></div>
<div class="border_top"></div>
<div class="border_bottom"></div>
<div class="border_right"></div>
</li>
</ul>
</div>
<div class="flash"></div>
<div class="news"></div>
</div>
</div>
<script src="jquery-2.1.0.min.js"></script>
<script>
$(".menu ul li").hover(function(){
var index=$(this).index();
//鼠标移上去
var top=$(this).position().top;//得到当前li到顶部的距离
var height1=$(this).find(".more").height();//得到more盒子的高度
var height=height1/3;
//当top比当前盒子高度三分之一还大
if(top>height){
if(index==5){
$(this).find(".more").css("bottom","-1px");
$(this).addClass("hover");
}else{
$(this).find(".more").css("top","-"+height+"px");
$(this).addClass("hover");
}
}else{
$(this).find(".more").css("top","-1px");
$(this).addClass("hover");
}
},function(){
//鼠标移开
$(this).removeClass("hover");
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端

相关文章推荐

新的分享

章节导航