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(){ //不能够触发hover curItem.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图片,附件有