0

etchapps Web サイトに示されているのと同様のメニュー効果を実現しようとしています 。

これは私が得ることができる限り近いです：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

サンプル サイトでは、目的の効果を得るために JavaScript の代わりにCSS トランジションを使用しています。この 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 selector も参照してください。

$(".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 に答える