HTML：

Question

我正在尝试实现类似的菜单效果 etchapps website

我尽可能接近：jsFiddle

$("#openMenu").click(function() {
    var menu = $("#menu");
    if ($(menu).is(":visible")) {
        $(menu).animate({
            width: 0
        }, 1000, function() {
            $(menu).hide();
        });
  } else {
     $(menu).show().animate({
       width: 200
      }, 1000); 
   }
});

请帮我合并这些项目以达到我想要的效果，谢谢！

Answer 1

示例网站使用CSS transitions而不是JavaScript来获得所需的效果。看看this jsFiddle。它应指向正确的方向。

HTML：

<div id="menu">
  <img src="http://m.liveperson.com/themes/images/menu-icon-hd-36-off.png" />
  <nav>
    <a href="home.html">Home</a>
    <a href="work.html">Work</a>
    <a href="contact.html">Contact</a>
    <a href="about.html">About</a>
  </nav>
</div>

CSS：

#menu img {
  cursor: pointer; 
  display: block;
  float: left;
  z-index: 2;
  transition: transform .25s linear;
  -moz-transition: -moz-transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
  -o-transition: -o-transform .25s linear;
}
#menu nav {
  display: inline-block;
  position: relative;
  height: 36px;
  z-index: 1;
  transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;
}
#menu.active nav {
  left: -20em;
  opacity: 0;
}
#menu.active img {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

的JavaScript：

$("#menu img").click(function() {
    $("#menu").toggleClass("active");
});

Answer 2

我知道你的问题提到了jQuery，但是当我们处理事物的显示方式时，最好尽可能使用CSS。

这是一个工作版本的演示，你需要在IE中查看它，但我很确定它会没事的。在IE8中，它将切换菜单而不是将其滑入（搜索“优雅降级”以找出为什么没问题）

<强> HTML

我整理了你的HTML，使其遵循一些更好的做法。

<强> CSS

我让它使用在移动设备上具有硬件支持的过渡（更流畅的动画）

<强> JS

简化为只切换一个类，另请参见CSS：目标选择器。

$(".navbar button").click(function() {
    var menu = $("ul").toggleClass('active');
});

http://jsfiddle.net/ymsHb/1/

希望有所帮助！

Answer 3

使用这个jQuery插件：http://code.google.com/p/jqueryrotate/wiki/Documentation，我修改了你的小提琴。在这个修改过的小提琴中，我添加了一个外部js文件http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js

要使用此插件，只需在脚本标记中添加所需的js。

.click菜单图标在菜单中滑动

3 个答案:

HTML：

CSS：

的JavaScript：