お知らせ

ハンバーガーボタン×ドロワーメニューのテンプレートを作成しました。詳しくはこちら

CSSのtransitionとtranslateを組み合わせます。

<button type="button" class="btn_menu">
 <!-- ボタンの記述 -->
</button>
<nav>
 <!-- ナビの記述 -->
</nav>

nav {
  width: 312px;
  height: 100%;
  transition: all 0.2s;
  transform: translate(312px);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
}
nav.open {
  transform: translate(0);
}

// jQueryは読み込み済み前提
$(function(){
  $('.btn_menu').click(function(){
    $('nav').toggleClass('open');}
  });
})

クリックすると、横からニュッとメニューが出てくるやつの実装方法です。最近はCSSによりアニメーションのサポートが進み、複雑なjQueryを書かなくても済みます。

上記の記述はメニューの大きさが横幅312px、高さ100%のものですが、こちらはご自身のものに応じて変更してください。ここではこの大きさで話を進めていきます。

CSSにアニメーションを記述する

大きさ以外のCSSですがposition:fixedとtop:0;right:0で右端のに固定しています。z-indexは1000くらいで優先的に上にくるようにしています。transform:translate(312px)で312px(メニューに大きさの分だけ)右にずらして外に出します。transition:all 0.2sで値の変化にアニメーションをつけます。今回は0.2秒で出てきます。

デフォルトではtranslateでずれているので右端から出ていますがopenのクラス名がつくとtranslateの値が0になります。この312pxから0になる変化を、transitionによって0.2秒の間に段階的に変化させることでアニメーションを実現しています。

jQueryはクラスの追加・削除を行うだけ

クラスを付けたり取ったりするのがjQueryの役目で、クラスbutton_menuをクリックすると、toggleClassによってopenのクラス名を制御しています。

これをアニメーションで×印になるハンバーガーボタンと組合わせるとこのサイトのようなメニューができます。