我该怎么做 - 动画菜单

这可能违反规则直接问一些事情，但我在我的系绳的末尾！我该怎么做 - 动画菜单

请看这些图片。

Without Sub- Menu

With Sub-menu

我需要动画的子菜单下来被点击时左右。当点击ABOUT时，我需要使用子菜单向下移动然后移动。

我可以用什么Jquery？

希望这是有道理的。

谢谢

来源

2011-12-28 Miles

你可以提供你正在使用的菜单项的HTML？ – john 2011-12-28 11:43:53

['animating']（http://api.jquery.com/animate）'width'和'height'属性怎么样？ – 2011-12-28 11:56:33

这里是一个演示：http://jsfiddle.net/Yk8bR/1/

我用来代替点击盘旋，但你可以改变这一点。

$('#menu ul li').hover(function(){ 
    $(this).find('ul').show(400); 
}, 
function(){ 
    $(this).find('ul').hide(0); 
});

HTML（别忘了锚）

<ul id="menu"> 
    <li>Home</li> 
    <li>About 
     <ul> 
      <li>The Company</li> 
      <li>The Team</li> 
     </ul> 
    </li> 
    <li>Services</li> 
</ul>

你会看到在演示基本的CSS，我不能打扰。

来源

2011-12-28 11:56:16

谢谢webarto！这正是我想要的。无论如何，要让其他子菜单项（团队）显示更流畅吗？该公司似乎工作正常，但团队似乎只是在屏幕上显示没有褪色 – Miles 2011-12-28 12:22:04

是的，当然，我不喜欢.show .hide，你可以使用.fadeIn和.fadeOut，这里是一个演示http：///jsfiddle.net/Yk8bR/9/ ...你可以使用几乎任何效果.. http://api.jquery.com/category/effects/ – 2011-12-28 12:25:01

这仅仅是伪代码，因为没有HTML一起工作：

$(document).ready(function() { 
    $('.menu-container-selector').children('ul').children('li').click(function() { 
     if ($(this).find('ul.sub-menu-ul').length > 0) { 
     $(this).find('ul.sub-menu-ul').animate({'opacity':'1','top':'30px','left':'100px'}); 
    } 
});

}）;

And a jsfiddle。

来源

2011-12-28 11:50:17 john

我该怎么做 - 动画菜单

回答

相关问题