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 已 float 。

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

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

Answer 1

这就是你想要的吗？我相信您的 CSS 中缺少 display:inline-block 属性。通过使用内联 block ，具有该属性的每个元素将保留 block 特征(宽度、高度等)，但也保持内联(之前或之后没有中断)。如果没有 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>