CSS skills: 3) show sub-navigate items when mouse hove on nav-item

时间：2023-02-04 16:17:09
<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();

相关文章