jQuery水平滑动切换导航 [英] jQuery horizontal slide toggle navigation

问题描述

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

I'm looking to make a simple nested navigation menu that "slides" or "flys" out horizontally-left on hover. I assume the only way to achieve this is with jQuery so I have been playing around with it.

初始状态

悬停状态

编辑:我知道这张图片看起来有点不对劲.我希望整个ul.sub菜单(即人员和方法")一起滑出，而不是顺次滑出.

I realize this picture looks a bit wrong. I want the entire ul.sub-menu (ie: PEOPLE & APPROACH) to slide out together, not sequentially.

一般结构为:

<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菜单会淡入，但在一行下方，并且由于浮动而一切都在跳来跳去.

My issue is when I hover over the parent LI, the .sub-menu fades in but is down a line and everything is jumping around due to floats.

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

Can someone point me in the right direction?

推荐答案

这是您要干的吗?我相信您在CSS中缺少display:inline-block属性.通过使用内联块，具有该属性的每个元素将保留块特征(宽度，高度等)，但也保持内联(在前后没有中断).如果没有块部分，则没有必要进行宽度修改.

Is this what you were going for? You were missing a display:inline-block property from your CSS I believe. By using an inline block, each element with that property will retain block features (width, height, etc) but also remain inline (no breaks before or after). Without the block part, it makes no sense to apply a width modification.

<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>

这篇关于jQuery水平滑动切换导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！