CSS skills: 3) show sub-navigate items when mouse hove on nav-item
<header> <div class="am-g am-g-fixed"> <ul class="am-avg-lg-2 topbar flipInY animated"> <li> <small class="diff1">全国连锁：</small> <a href=""> <small>南京</small> </a> <a href=""> <small>北京</small> </a> <a href=""> <small>沈阳</small> </a> <a href=""> <small>大连</small> </a> <a href=""> <small>苏州</small> </a> <a href=""> <small>无锡</small> </a> <a href=""> <small>常州</small> </a> </li> <li class="am-text-right diff"> <a href=""> <small>KB+官网微信</small> </a> <small>|</small> <a href=""> <small>KB+官网微博</small> </a> <small>|</small> <a href=""> <small>热线：400-025-0505</small> </a> <a href="" class="topbarIco snwb animateCan"></a> <a href="" class="topbarIco txwb animateCan"></a> <a href="" class="topbarIco wx animateCan"></a> </li> </ul> <div class="diff3 am-cf"> <img src="./amazeui-samples_files/topImg2.jpg" class="am-fr animated bounceInRight"> <a href="./amazeui-samples_files/amazeui-samples.html"><img src="./amazeui-samples_files/headlogo.gif" class="animated bounceInLeft"></a> <img src="./amazeui-samples_files/topImg1.gif" class="am-margin-left-xl animated bounceInLeft"> </div> <div> <ul class="am-avg-lg-8 nav"> <li class="box am-text-center"> <a href="./amazeui-samples_files/amazeui-samples.html">首页<small class="am-block">Home</small></a> <a href="./amazeui-samples_files/amazeui-samples.html" class="hover">首页<small class="am-block">Home</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/ppls">品牌连锁<small class="am-block">BRAND CHAIN</small></a> <a href="http://kgdn.kangbeijia.cn/ppls" class="hover">品牌连锁<small class="am-block">BRAND CHAIN</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/zjtd" style="top: 0px;">专家团队<small class="am-block">Experts</small></a> <a href="http://kgdn.kangbeijia.cn/zjtd" class="hover" style="top: 0px;">专家团队<small class="am-block">Experts</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/hxjs" style="top: 0px;">核心技术<small class="am-block">Technology</small></a> <a href="http://kgdn.kangbeijia.cn/hxjs" class="hover" style="top: 0px;">核心技术<small class="am-block">Technology</small></a> </li> <li class="box am-text-center"> <a href="javascript:void(0)" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a> <a href="javascript:void(0)" class="hover" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/myal">美牙案例<small class="am-block">DENTAL CASE</small></a> <a href="http://kgdn.kangbeijia.cn/myal" class="hover">美牙案例<small class="am-block">DENTAL CASE</small></a> </li> <li class="box am-text-center"> <a href="http://kgdn.kangbeijia.cn/shzr">社会责任<small class="am-block">Sociol duty</small></a> <a href="http://kgdn.kangbeijia.cn/shzr" class="hover">社会责任<small class="am-block">Sociol duty</small></a> </li> <li class="box am-text-center diff"> <a href="javascript:void(0)" onclick="swtClick()" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a> <a href="javascript:void(0)" onclick="swtClick()" class="hover" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a> </li> </ul> </div> </div> </header> <!--二级导行--> <div class="navLevel"> <div class="navLevelBox" style=""> <div class="am-fl"> <a href="http://kgdn.kangbeijia.cn/ppls/kbjnj/">康贝佳 • 南京</a> <a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/">尖端齿科设备</a> <a href="http://kgdn.kangbeijia.cn/ppls/qglsjg/">全国品牌连锁</a> <a href="http://kgdn.kangbeijia.cn/ppls/aqjyhj/">安全就医环境</a> <a href="http://kgdn.kangbeijia.cn/ppls/ldjpbz/">六大金牌保障</a> <a href="http://kgdn.kangbeijia.cn/ppls/lylx/">具体来院路线</a> <a href="">品牌荣誉</a> <a href="">KB+ 官方微博</a> </div> <ul class="am-avg-lg-3 am-fl"> <li><a href="http://kgdn.kangbeijia.cn/myal/"><img src="./amazeui-samples_files/navLevel2.jpg"></a></li> <li><a href="http://kgdn.kangbeijia.cn/zjtd/"><img src="./amazeui-samples_files/navLevel3.jpg"></a></li> <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel4.jpg"></a></li> </ul> </div> <div class="navLevelBox" style="display: none;"> <div class="am-fl"> <a href="http://kgdn.kangbeijia.cn/zjtd/gjzj/">KB+国际专家</a> <a href="http://kgdn.kangbeijia.cn/zjtd/gnzj/">KB+国内专家</a> <a href="">凯撒【希腊】</a> <a href="">牙齿种植：胡正元</a> <a href="">摩根【美国】</a> <a href="">牙齿美容：徐辉</a> <a href="">崔容硕【韩国】</a> <a href="">牙齿矫正：白延勇</a> <a href="">任势雄【韩国】</a> <a href="">口腔修复：陈 鹏</a> </div> <ul class="am-avg-lg-3 am-fl"> <li><a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/"><img src="./amazeui-samples_files/navLevel5.jpg" class=""></a></li> <li><a href="http://kgdn.kangbeijia.cn/hxjs/"><img src="./amazeui-samples_files/navLevel6.jpg"></a></li> <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel7.jpg"></a></li> </ul> </div> <div class="navLevelBox diff" style="display: none; height: 218px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;"> <div class="am-fl"> <a href="">牙齿种植 |</a> <a href="">活动义齿 |</a> <a href="">全瓷牙 |</a> <a href="">假牙</a><br> <a href="">牙齿美容 |</a> <a href="">牙齿矫正 |</a> <a href="">美容冠 |</a> <a href="">镶牙</a><br> <a href="">牙齿美白 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/yxyz/">隐形矫正 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/qctm/">瓷贴面 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/bay/">拔牙</a><br> <a href="">牙齿修复 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/ggzl/">根管治疗 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/kcy/">烤瓷牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/by/">补牙</a><br> <a href="">不良冠体修复 |</a> <a href="">牙套</a> </div> <ul class="am-avg-lg-3 am-fl"> <li><a href="http://kgdn.kangbeijia.cn/zjtd/"><img src="./amazeui-samples_files/navLevel3.jpg"></a></li> <li><a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/"><img src="./amazeui-samples_files/navLevel5.jpg"></a></li> <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel4.jpg"></a></li> </ul> </div> <div class="navLevelBox diff" style="display: none; height: 218px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;"> <div class="am-fl"> <a href="">牙齿缺损 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczz/ycsd/">牙齿松动 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/hy/">虎牙 |</a> <a href="">门牙突出</a><br> <a href="">牙齿缺失 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/dbt/">地包天 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/ycyj/">牙齿拥挤 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/by/">龅牙</a><br> <a href="">牙齿断裂 |</a> <a href="">瓜子牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/ycxs/">牙齿稀疏</a><br> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/ssy/">色素牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/ycxyh/">黄牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmb/hy/">黑牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmb/fby/">氟斑牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/ycmb/shsy/">四环素牙</a><br> <a href="">不良冠体 |</a> <a href="">牙痛 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/zy/">蛀牙 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/yzy/">牙周炎 |</a> <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/yyy/">牙龈炎</a> </div> <ul class="am-avg-lg-3 am-fl"> <li><a href="http://kgdn.kangbeijia.cn/hxjs/"><img src="./amazeui-samples_files/navLevel6.jpg" class=""></a></li> <li><a href="http://kgdn.kangbeijia.cn/myal/"><img src="./amazeui-samples_files/navLevel2.jpg"></a></li> <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel7.jpg"></a></li> </ul> </div> <div class="navLevelBox" style=""> <div class="am-fl"> <a href="http://kgdn.kangbeijia.cn/myal/zral/">KB+真人案例</a> <a href="http://kgdn.kangbeijia.cn/yydt/">康贝佳 • 动态</a> <a href="http://kgdn.kangbeijia.cn/myal/yczzal/">牙齿种植案例</a> <a href="">KB+官方微信</a> <a href="http://kgdn.kangbeijia.cn/myal/ycmral/">牙齿美容案例</a> <a href="">KB+官方微博</a> <a href="http://kgdn.kangbeijia.cn/myal/ycjzal/">牙齿矫正案例</a> <a href="http://kgdn.kangbeijia.cn/ppls/aqjyhj/">星级就医环境</a> <a href="http://kgdn.kangbeijia.cn/myal/ycmbal/">牙齿美白案例</a> <a href="http://kgdn.kangbeijia.cn/ppls/lylx/">具体来院路线</a> </div> <ul class="am-avg-lg-3 am-fl"> <li><a href="http://kgdn.kangbeijia.cn/zjtd/"><img src="./amazeui-samples_files/navLevel3.jpg"></a></li> <li><a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/"><img src="./amazeui-samples_files/navLevel5.jpg"></a></li> <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel4.jpg"></a></li> </ul> </div> </div>
Control js:
//二级导行 function showNav(i,t){ $('.navLevel .navLevelBox').eq(i).stop().slideDown().siblings().stop().slideUp(); } function hideNav(){ $('.navLevel .navLevelBox').slideUp(); } var hNav,index=0; $(document).on('mouseover','.nav li',function(){ var _this=$(this); index=_this.index(); if(index>=1 && index <=5){ clearTimeout(hNav); showNav(index-1); } }).on('mouseleave','.nav li',function(){ if(index>=1 && index <=5){ hNav=setTimeout(hideNav,250); } }); $(document).on('mouseover','.navLevel',function(){ clearTimeout(hNav); }).on('mouseleave','.navLevel',function(){ hNav=setTimeout(hideNav,250); }); //二级动画效果 var navlevelHover=new base.gClass.hover('.navLevel .navLevelBox li img','pulse animated'); navlevelHover.hoverFun();
