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();

CSS skills: 3) show sub-navigate items when mouse hove on nav-item的更多相关文章

CSS skills: 1） Navigate item's animation
<style> .nav { border-right:1px solid #268eb7; } .nav li{overflow:hidden;height:55px;border-le ...
[CSS] Re-order the appearance of grid items using the order property
As with flex items, we can set an order value on grid items. Let’s see how this affects the DOM and ...
CSS skills: 6) auto hide the top bar javascript
//jquery $(document).ready(function(){ $(window).scroll(function() { $(this).scrollTop() > 10 ? $ ...
CSS skills: 5) jquery hover(over,out)
$(":div[name=div_edit]").each(function() { $(this).hover(function() { $(this).find("& ...
CSS skills: 4) goto page head script
//返回顶部 $(document).on('click', '.backTop', function (e) { $('html, body').animate({scrollTop: 0}, 50 ...
CSS skills: 2) change hover dynamically by js
//命名空间 var base = {}; //class base.gClass={}; //鼠标hover交互方法: 注册对象的hover的class特性以及mouseMoveIn,mouseMo ...
ssdb底层实现——ssdb底层是leveldb，leveldb根本上是skiplist（例如为存储多个list items，必然有多个item key，而非暴力string cat），用它来做redis的list和set等，势必在数据结构和算法层面上有诸多不适
我已经在用ssdb的hash结构,存储了很多数据了,但是我现在的用法正确吗? 我使用hash结构合理吗? 1. ssdb数据库说是类似redis,而且他们都有hash结构,但是他们的命名有点不同,ss ...
10 Skills Every SharePoint Developer Needs
10 Skills Every SharePoint Developer Needs(原文) This blog post guides you through the essential skill ...
ko list and css gradient
<!DOCTYPE html> <html> <head> <title></title> <script src="js/ ...

随机推荐

虚拟桌面基础架构（VDI）与终端服务和传统PC对比
VDI(Virtual Desktop Infrastructure),即虚拟桌面基础架构,正迅速成为一个热门词汇,它将颠覆企业向终端用户交付应用的游戏规则.这篇专题就是想通过VDI与两种传统技术的对 ...
安装 RabbitMQ C#使用-摘自网络（包括RabbitMQ的配置）
1.什么是RabbitMQ.详见 http://www.rabbitmq.com/ . 作用就是提高系统的并发性,将一些不需要及时响应客户端且占用较多资源的操作,放入队列,再由另外一个线程,去异步处理 ...
nodejs + socket.io + redis 新手上路
最近要更新网站架构了,决定转入 nodejs + socket.io + redis 方式. 战斗刚开始: 网上的文章太松散,我根据各个网友的分享进行整理 ,让大家可以方便上手. 进入node.js之 ...
CalendarUtil
package ch.makery.address.util; import java.text.ParseException; import java.text.SimpleDateFormat; ...
HDU 4884 TIANKENG’s rice shop （模拟）
TIANKENG's rice shop 题目链接: http://acm.hust.edu.cn/vjudge/contest/123316#problem/J Description TIANKE ...
[iOS 多线程 & 网络 - 1.2] - 多线程GCD
A.GCD基本使用 1.GCD的概念什么是GCD全称是Grand Central Dispatch,可译为"牛逼的中枢调度器"纯C语言,提供了非常多强大的函数GCD的优势GCD是 ...
FluentData微型ORM
最近在帮朋友做一个简单管理系统,因为笔者够懒,但是使用过的NHibernate用来做这中项目又太不实际了,索性百度了微型ORM,FluentData是第一个跳入我眼睛的词.简单的了解下FluentDa ...
MVC神韵---你想在哪解脱！（十八）
数据的修改视图首先打开Movie控制器,添加一个返回数据修改视图的Edit()方法与一个对该视图中的表单提交进行处理的Edit()方法,代码如下所示: // GET: /Movies/Edit pu ...
Mac使用指南
1.csrutil命令简单来说是苹果在新系统后加入的一个安全机制. Rootless讨论的前提是假定root账户是OS X(或者其他Unix系统)中对抗恶意程序保护操作系统的最后一道防线.意思是一 ...
<select>改造成<s:select>实现表单的回显功能
初始: <select name="viewType"> <option value="0">全部主题</option> & ...

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

CSS skills: 3) show sub-navigate items when mouse hove on nav-item的更多相关文章

随机推荐

热门专题