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

初始状态

enter image description here

悬停状态

编辑：我知道这幅画看上去有点不对劲。我想要整个ul.sub菜单（即：人物& APPROACH）一起滑出，而不是顺序。

enter image description here

一般结构为：

<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菜单淡入，但是在一条线上，一切都由于浮动而跳动。

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

来源

2012-12-06 tr3online

如果U添加的jsfiddle链接.. – thecodejack

这是你要去的吗？你错过了一个显示：我相信你的CSS的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>

来源

2012-12-06 03:33:12 ebrandell

此外，它会更简单，你不需要宽度：100％。我只是补充说，使测试更容易。 :) – ebrandell

啊。我猜最大的问题是白色空间：nowrap。这是导致这些话崩溃，看起来都很时髦。现在我只需要弄清楚如何让菜单在你悬停在它的孩子身上时保持打开状态。 – tr3online

已根据您的最新要求进行了修改。现在应该保持开放，直到用户移动到不同的父母李。看看修改后的HTML（这可能最终会改变，但我认为它说明了这个概念）。 – ebrandell

jQuery水平滑动切换导航

回答

CSS：

的Javascript：

HTML：

相关问题