0

我正在尝试实现 etchapps 网站上显示的类似菜单效果。

这是我能得到的最接近的：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); 
   }
});

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

4

3 回答 3

2

示例站点使用CSS 过渡而不是 JavaScript 来获得所需的效果。看看这个 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");
});
于 2013-06-08T16:23:10.973 回答
0

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

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

HTML

我整理了您的 html 以使其遵循更多最佳实践。

CSS

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

JS

简化为仅切换一个类，另请参见 CSS :target 选择器。

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

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

希望有帮助！

于 2013-06-08T16:21:14.747 回答
0

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

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

于 2013-06-08T16:41:21.717 回答