jQuery 水平滑动切换导航

Question

我正在寻找一个简单的嵌套导航菜单，它可以在悬停时水平向左“滑动”或“飞出”。我认为实现这一点的唯一方法是使用 jQuery，所以我一直在玩它。

初始状态

悬停状态

编辑：我意识到这张照片看起来有点不对劲。我希望整个 ul.sub-menu（即：PEOPLE & APPROACH）一起滑出，而不是按顺序滑出。

一般结构是：

<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 是浮动的。

我的问题是，当我将鼠标悬停在父 LI 上时，.sub-menu 淡入但在一行下方，并且由于浮动，所有内容都在跳跃。

有人能指出正确的方向吗？

Answer 1

这就是你想要的吗？我相信您的 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>