您的位置：首页 > 其它

二级菜单，移入显示隐藏

2017-05-18 17:49 369 查看
二级菜单

<!DOCTYPE html>
<html>
<head>
<title>京东菜单</title>
<style>
.none{display:none;}
.act{background:#999395;}
#wrap{
position:relative;
left:0;
top:20px;
width:200px;
}
#wrap ul{
background:#6e6568;
padding:0;
}
#wrap ul li{
display:block;
height:30px;
width:200px;
color:#fff;
text-align:center;
line-height:30px;
}
.one li span:hover{color:red;}
#sub{
width:700px;
background:#eee;
height:200px;
position:absolute;
top:0px;
left:200px;
}
</style>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrap">
<ul class="one">
<li data-id="1" ><span>家用电器</span></li>
<li data-id="2"><span>手机/运营商/数码</span></li>
<li data-id="3"><span>电脑/办公</span></li>
<li data-id="4"><span>家居/家具/家装/厨具</span></li>
<li data-id="5"><span>男装/童装/女装</span></li>
<li data-id="6"><span>美妆个护/宠物</span></li>
<li data-id="7"><span>女鞋/箱包/珠宝/钟表</span></li>
<li data-id="8"><span>男鞋/运动/户外</span></li>
<li data-id="9"><span>汽车/汽车用品</span></li>
<li data-id="10"><span>母婴/玩具乐器</span></li>
<li data-id="11"><span>食品/酒类/生鲜</span></li>
</ul>
<div id="sub" class="none">
<div id="1" class="sub_cont none">家用电器</div>
<div id="2" class="sub_cont none">手机/运营商/数码</div>
<div id="3" class="sub_cont none">电脑/办公</div>
<div id="4" class="sub_cont none">家居/家具/家装/厨具</div>
<div id="5" class="sub_cont none">男装/童装/女装</div>
<div id="6" class="sub_cont none">美妆个护/宠物</div>
<div id="7" class="sub_cont none">女鞋/箱包/珠宝/钟表</div>
<div id="8" class="sub_cont none">男鞋/运动/户外</div>
<div id="9" class="sub_cont none">汽车/汽车用品</div>
<div id="10" class="sub_cont none">母婴/玩具乐器</div>
<div id="11" class="sub_cont none">食品/酒类/生鲜</div>
</div>
</div>
<script>
$(function(){
var activeRow;
var activeMun;
$(".one li").on(" mouseover",function(e){
$(this).addClass("act");
$("#sub").removeClass("none");
var arr=$(this).attr("data-id");
$("#sub div").eq(arr-1).removeClass("none");
$("#sub div").eq(arr-1).siblings().addClass("none");

})
.on("mouseout",function(e){
$(this).removeClass("act");
$("#sub").addClass("none");
})
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  二级菜单-导航条
相关文章推荐
新的分享
章节导航