京东导航的jquery实现

1、先看一下效果图

 2、规划好html的结构

 

<!-- 放导航的容器 --><div id="left"><!--一个item1是一个一级导航 --><div class="item1"><!-- 一级导航标题--><h1>一级标题</h1><!-- 一个item2是一个二级导航--><div class="item2"><!-- 二级导航标题--><h1>二级标题</h1><!-- 三级导航块--><div class="item3"><!-- 内容--><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span></div><h1>二级标题</h1><div class="item3"><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span></div><h1>二级标题</h1><div class="item3"><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span></div></div></div><div class="item1"><h1>一级标题</h1><div class="item2"><h1>二级标题</h1><div class="item3"><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span></div><h1>二级标题</h1><div class="item3"><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span></div><h1>二级标题</h1><div class="item3"><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span><span><a href="">三级级标题</a></span></div></div></div></div>

 3、定义好他们应有的样式，等会用js调用

 

/*定义宽*/#left,.item1,.item2,.item3,.item1_h1{width:250px;}#left{float:left;border:solid 2px #D00000;}#left h1{margin:0;}.item1,.item2{float:left;}/*一级导航标题样式*/.item1_h1{height:40px;background:url(bg.png);padding:0;font-size:14px;text-align:center;line-height:40px;color:#FFF;}/*鼠标移出二级标题的样式*/.item2_out{width:230px;height:25px;background:#FDF1DE;border-top:solid 1px #FDF1DE;border-bottom:solid 1px #FDF1DE;line-height:25px;color:#000;font-weight:normal;text-align:left;padding-left:20px;font-size:14px;}/*鼠标放到二级标题的样式*/.item2_over{width:230px;height:25px;line-height:25px;text-align:left;padding-left:20px;background:#FFF;border-top:solid 1px #CC3300;border-bottom:solid 1px #CC3300;color:#CC0000;font-weight:bold;font-size:14px;}/*浮动栏样式*/.item3{height:200px;background:#FFF;float:left;position:absolute;border:solid 1px #CC3300;padding:10px;}/*浮动栏上链接的样式*/.item3 a{color:#000;font-size:12px;text-decoration:none;}.item3 a:hover{color:#CC0000;text-decoration:underline;z-index:2;}

 4、编写js控制代码

 

$(function(){//先把浮动框隐藏起来$(".item3").hide();//定义一级标题和二级标题的样式$(".item1>h1").addClass("item1_h1");$(".item2>h1").addClass("item2_out");//只有鼠标不在item2和item3上时浮动块才隐藏var isHide1 = true;var isHide2 = true;//当前在哪个item2的标题上(h1)var curItem;//遮盖浮动框左边需要隐藏的线var modalDiv = "<div id='lineModal' style='width:1px;height:25px;float:left;background:#FFF;position:absolute;z-index:4;'></div>";$("body").append(modalDiv);$("#lineModal").hide();//把item2下的h1增加hover事件，本来想用css定义hover，可以jquery无法触发浏览器默认hover$(".item2>h1").hover(function(){$(this).removeClass("item2_out");$(this).addClass("item2_over");},function(){$(this).removeClass("item2_over");$(this).addClass("item2_out");});//鼠标移动到item2的h1上显示item3$(".item2>h1").mouseover(function(){var subItem = $(this).next(".item3");if('none'==subItem.css("display")){var pos = $(this).position();subItem.css("top",pos.top);subItem.css("left",pos.left+$(this).width()-20);$("#lineModal").show();$("#lineModal").css("top",pos.top+1);$("#lineModal").css("left",pos.left+$(this).width()-20);subItem.show();curItem = $(this);}});//鼠标移出到item2的h1并且也不在item3上时隐藏item3$(".item2>h1").mouseout(function(){isHide1 = true;if(isHide1&&isHide2){$(this).next(".item3").hide();curItem.removeClass("item2_over");curItem.addClass("item2_out");$("#lineModal").hide();}});$(".item3").mouseover(function(){//不能够触发hovercurItem.trigger("mouseover");if('none'==$(this).css("display")){$(this).show();isShow = false;}});$(".item3").mouseout(function(){isHide2 = true;if(isHide1&&isHide2){$(this).hide();curItem.removeClass("item2_over");curItem.addClass("item2_out");$("#lineModal").hide();}});});

 5、需要的bg.png图片，附件有