Question

我想制作一个带有子菜单的导航栏，点击后会滑出。

所以我想在点击另一个无序列表项时为无序列表设置动画。

所以我想的是:(不包括CSS）

<ul id="menu">
  <li id="filemenu">File</li>
  <li id="reportmenu">Reports</li>
  <li id="toolsmenu">Tools</li>
  <li id="helpmenu">Help</li>
</ul>

<div class="fileSubmenu">
  <ul class = "fileSubmenu sm">
   <li>New</li>
   <li>Open</li>
   <li>Copy</li>
   <li>Print Setup</li>
   <li>Exit</li>
  </ul>
</div>

jquery的：

   $(document).ready(function () {
      $("#filemenu").click(function () {
           $(".fileSubmenu").animate({left:'50px'});
      });
  });

所以我认为整个第二个列表会向右滑动，但事实并非如此。

专家建议什么？

基本结构http://jsfiddle.net/zLCWW/2/

Answer 1

试试这个：

$(document).ready(function () {
   $("#filemenu").click(function () {
        $("div.fileSubmenu").animate({paddingLeft:'50px'});
   });
});

因为使用left-attribute，您只能修改position:relative或position:absolute的元素。

Answer 2

你只需要让你的CSS定位使用默认值以外的东西（static）。

Here's a demo

CSS：

.fileSubmenu {
     position: relative;
}

如果您对严格使用jQuery感到痛苦：

jQuery的：

$('.fileSubmenu').css({'position': 'relative'}).animate({'left': '50px'});

Answer 3

这是一个关于构建和动画滑出导航菜单的精彩演示。这固定在屏幕的左侧，但您可以根据需要进行调整。 Demo

Answer 4

试试这个：FIDDLE

<强> JS

 $(document).ready(function () {

    $("#menu li").click(function () {
        $( ".fileSubmenu" ).animate({
           width: "70%",
          marginLeft: "50px"
         }, 1500 );
    });
  });

导航栏 - 动画ul

4 个答案:

Here's a demo

CSS：

jQuery的：