jQuery水平幻灯片切换导航

Question

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

初始状态

悬停状态

编辑：我意识到这张照片看起来有点不对劲。我希望整个ul.sub-menu（即：PEOPLE＆amp; 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上时，.sub菜单会淡入但是在一条线上，所有内容都会因浮动而跳转。

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

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>