jquery - jQuery水平滑动切换导航

我正在寻找一个简单的嵌套导航菜单，该菜单在悬停时会向左水平滑动或“飞出”。我认为实现此目标的唯一方法是使用jQuery，因此我一直在研究它。

初始状态



悬停状态

编辑：我意识到这张照片看起来有点不对劲。我希望整个ul.sub菜单（即“人员和方法”）一起滑出，而不是顺次滑出。



总体结构为：

<nav>
<ul>
    <li>ABOUT
        <ul class="sub-menu">
            <li>PEOPLE</li>
            <li>APPROACH</li>
        </ul>
    </li>
    <li>PROJECTS</li>
    <li>CONTACT</li>
</ul>
</nav>

我的jQuery是：

$("nav li").on('hover', function(){
    $(this).children(".sub-menu").animate({width: 'toggle'});
});

目前我的李氏浮在水面上。

我的问题是，当我将鼠标悬停在父级LI上时，.sub菜单会淡入但在一行上，并且由于浮动而一切都在跳来跳去。

有人可以指出我正确的方向吗？

最佳答案

这就是你要的吗？我相信您在CSS中缺少display:inline-block属性。通过使用内联块，具有该属性的每个元素将保留块特征（宽度，高度等），但仍保持内联（在前后没有中断）。如果没有块部件，则应用宽度修改没有任何意义。

CSS：

<style type='text/css'>
    nav li {
        display: inline;
        list-style: none;
    }

    .sub-menu {
        display: inline-block;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }
</style>

Javascript：

<script>
    $(function() {
        $('.sub-menu').hide();

        $('.link').hover(
            function() {
                $('.sub-menu', this).stop().animate({
                    width: 'toggle',
                    opacity: 'toggle'
                } /* [, duration in ms] */);
            }
        );
    });
</script>

HTML：

<nav>
    <ul>
        <li class="link">ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li class="link">PROJECTS
            <ul class="sub-menu">
                <li>ONE</li>
                <li>TWO</li>
            </ul>
        </li>
        <li>CONTACT</li>
    </ul>
</nav>