0

サイドメニューを作ろうとしているのですが、完璧ではありません。見てみましょう：

JSFiddle

HTML

<div id="content-button">
    <div id="open-menu">Click</div>
</div>

<div id="content">
    <nav id="side-menu">
        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </nav>
</div>

Javascript

$(function() {
    $("#open-menu").click(function() {
        var $cache = $("#side-menu");
      if($cache.is(":visible"))
      {
        $cache.hide("slide", {direction:"left"}, 250);
      }
      else
      {
        $cache.show("slide", {direction:"left"}, 250);
      }
    });
});

CSS

#content-button {
    width: 100%;
    height: 100px;
}

#open-menu {
    width: 50px;
    height: 50px;
}

#side-menu {
    position: relative;
    left: 0;
}

「クリック」をクリックすると、画面の左側にサイドメニューが表示されますが：

  • スライド効果ではなく、突然表示されます
  • div「コンテンツ」の上部に表示され、すべてのコンテンツをプッシュします。左側に表示し、コンテンツ全体を右側にプッシュしたい
  • 「クリック」をもう一度クリックしても消えません

私の問題を理解していただければ幸いです。JsFiddle でお見せすることはできません。動作せず、ローカルにいますが、必要に応じてスクリーンショットを作成できます。

4

1 に答える 1

0

「スライド」は、表示/非表示の有効なパラメーターではありません。

代わりに、アニメーションを使用できます。

$(function() {
  $("#open-menu").click(function() {
    var $cache = $("#side-menu");
    if($cache.position().left === 0)
    {
      $cache.animate({
        left: -300
      }).then(function(){
        $cache.hide();
      });
    }
    else
    {
      $cache.show();
      $cache.animate({
        left: 0
      });
    }
  });
});

メニューが相対的に配置されていることを確認してください。

#side-menu {
  position: relative;
  /* left: -300px */ /* uncomment to default hidden */
}

デモ

于 2013-08-05T12:16:39.900 に答える