<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<!--
一般对于盒子div而言我们所作出的div层数需要与我们所想的div层数多一个以便position的修改
-->
<script src="jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.header{
position: relative;
background-color: chartreuse;
text-align: center;
height:32px;
line-height: 32px;
}
.pg_header{
position: absolute;
left:20px;
width:100%;
}
.header-nav{
height: 32px;
}
.header-nav .nav-content{
left: 20px;
width: 120px;
background-color: pink;
}
.header-nav .nav-content a{
}
.container{
width:200px;
}
.menu-category .category .title{
height:32px;
background-color: gold;
}
.menu-category .category .body{
height:32px;
background-color: purple;
}
.header-menu{
position: relative;
}
.menu-content{
position: absolute;
top:0px;
left:200px;
}
.hide{
display: none;
}
.show{
display: block;
}
.current{
border-left: 2px solid red;
}
.menu-content .item{
position: absolute;
width: 200px;
top: 0px;
left: 0px;
}
.menu-content .item dl{
background-color: darkgray;
}
</style>
</head>
<body>
<div class="header">
<div class="pg_header">
<div class="header-nav">
<div class="nav-content">
<a id="all_menu_category">全部商品
</a>
</div>
</div>
<div class="header-menu">
<div class="container hide">
<div class="menu-category" id="nav_all_menu">
<div class="category" float-content="one">
<div class="title">厨房用品
</div>
<div class="body">
<a href="#">锅子
</a>
</div>
</div>
<div class="category" float-content="two">
<div class="title">家电
</div>
<div class="body">
<a href="#">空调
</a>
</div>
</div>
<div class="category" float-content="three">
<div class="title">床上用品
</div>
<div class="body">
<a href="#">床单
</a>
</div>
</div>
</div>
<div class="menu-content" id="nav_all_content">
<div class="item hide" float-id="one">
<dl>
<dt><a href="#">厨房用品1
</a></dt>
<dd>
<span>|
<a href="#">角阀1
</a></span>
</dd>
</dl>
<dl>
<dt><a href="#">厨房用品1
</a></dt>
<dd>
<span>|
<a href="#">角阀1
</a></span>
</dd>
</dl>
<dl>
<dt><a href="#">厨房用品1
</a></dt>
<dd>
<span>|
<a href="#">角阀1
</a></span>
</dd>
</dl>
</div>
<div class="item hide" float-id="two">
<dl>
<dt><a href="#">厨房用品2
</a></dt>
<dd>
<span>|
<a href="#">角阀2
</a></span>
</dd>
</dl>
<dl>
<dt><a href="#">厨房用品2
</a></dt>
<dd>
<span>|
<a href="#">角阀2
</a></span>
</dd>
</dl>
<dl>
<dt><a href="#">厨房用品2
</a></dt>
<dd>
<span>|
<a href="#">角阀2
</a></span>
</dd>
</dl>
</div>
<div class="item hide" float-id="three">
<dl>
<dt><a href="#">厨房用品3
</a></dt>
<dd>
<span>|
<a href="#">角阀3
</a></span>
</dd>
</dl>
<dl>
<dt><a href="#">厨房用品3
</a></dt>
<dd>
<span>|
<a href="#">角阀3
</a></span>
</dd>
</dl>
<dl>
<dt><a href="#">厨房用品3
</a></dt>
<dd>
<span>|
<a href="#">角阀3
</a></span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
change("#all_menu_category","#nav_all_menu","#nav_all_content");
})
function change(menuF,menuS,menuT){
$(menuF).bind('mouseover',function () {
$(menuS).parent().removeClass('hide');
});
$(menuF).bind('mouseout',function(){
$(menuS).parent().addClass('hide');
});
// $(menuS).bind('mouseover',function () {
// $(menuS).parent().removeClass('hide');
// })
$(menuS).children().bind('mouseover',function(){
$(menuS).parent().removeClass('hide');
var tag=$(this).attr('float-content');
var item=$(menuT).find('[float-id="'+tag+'"]');
item.removeClass('hide').siblings().addClass('hide');
});
$(menuS).children().bind('mouseout',function(){
$(menuS).parent().addClass('hide');
$(menuT).children().addClass('hide');
});
$(menuT).children().bind('mouseover',function(){
$(menuS).parent().removeClass('hide');
$(this).removeClass('hide');
})
$(menuT).children().bind('mouseout',function(){
$(menuS).parent().addClass('hide');
$(this).addClass('hide');
})
$(menuS).children().hover(function () {
$(this).addClass('current');
},function(){
$(this).removeClass('current');
})
// $(menuS).find('.category').hover(function(){
// var tag=$(this).attr('float-content');
// var attrStr='[float-id="'+tag+'"]';
// $(menuT).find('item'+attrStr).show();
// })
}
</script>
转载于:https://www.cnblogs.com/ssyfj/p/8497133.html
相关资源：jQuery商城多级分类导航菜单
