小米官网顶部导航问题如何用JQ做?

最近在仿小米官网鼠标划过导航会出现下面的图片。如何实现的?我用了hide和show,移走的瞬间就消失了导致根本没法移到图片上.请问这么解决这个问题?

已邀请:

gwolf

赞同来自:

// nav mouseover 

setTimeOut(function (){
    // animate height 0px -> 100px
    
},300);

移入移出设置300ms延迟就可以了,不过注意按照情况清除定时器。

Paris0008

赞同来自:

见到过一种做法,将二级菜单放置到一级菜单内部。
li上触发hover事件显示二级菜单,因为二级菜单还是在li内部,所以你移动的过程中二级菜单不会消失。

<li>
    <label>一级菜单</label>
    <div class="hide">
        <ul>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </div>
</li>

feifei00gg

赞同来自:

用css动画,限定时间,控制高度,焦点时让选中元素从0改为300做一个变化时间,移走时从300变成0,给显示的元素加一个状态,获取焦点显示。

要回复问题请先登录注册