【コピペOK】jQueryでシンプルなハンバーガーメニューを作る方法

javascript


ボタンを押すとナビメニューがアニメーション表示されるシンプルなハンバーガーメニューを作成します。レスポンシブ化するときにおすすめです。
デモ

  • htmlでメニュー部分を作成
  • CSSでスタイリング
  • jQueryで動きをつける

実際に動きを出すのはCSS部分です。jQueryはクラスを付与するために使います。

HTML

<!-- ナビメニュー部分 -->
<nav class="NavMenu">
 <ul>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
  <li><a href="#">Menu4</a></li>
  <li><a href="#">Menu5</a></li>
 </ul>
</nav>
<!-- ハンバーガーメニュー部分 --> 
<div class="Toggle">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

/*ナビメニューのスタイルを指定*/
nav.NavMenu{
 position: fixed; /*表示位置を固定*/
 z-index: 2; /*重ね順を変更*/
 top: 0; /*表示位置を指定*/
 left: 0; /*表示位置を指定*/
 background: #fff;/*背景を白にする*/
 color: #000; /*文字色を黒にする*/
 text-align: center; /*テキストを中央揃え*/
 width: 100%; /*全幅表示*/
 transform: translateY(-100%); /*ナビを上に隠す*/
 transition: all 0.6s; /*アニメーションの時間を指定*/
}

nav.NavMenu ul{
 background: #ccc; /*背景をグレーにする*/
 width: 100%;
 margin: 0 auto;
 padding: 0;
}

nav.NavMenu ul li{
 font-size: 1.1em;
 list-style-type: none;
 padding: 0;
 width: 100%;
 border-bottom: 1px dotted #333;
}

nav.NavMenu ul li:last-child{
 padding-bottom: 0;
 border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a{
 display: block; /*クリックできる領域を広げる*/
 color: #000;
 padding: 1em 0;
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
 transform: translateY(0%);
}
/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 13px;
    top: 12px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #000;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
    left: 6px;
}
 
.Toggle span:nth-child(1) {
    top: 9px;
}
 
.Toggle span:nth-child(2) {
    top: 18px;
}
 
.Toggle span:nth-child(3) {
    top: 27px;
}
 
/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

Javascript

//jQueryのライブラリの読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
//トグルボタンが押されたときに、クラスを付与
<script type="text/javascript">
$(function() {
 $('.Toggle').click(function() {
  $(this).toggleClass('active');

 if ($(this).hasClass('active')) {
  $('.NavMenu').addClass('active');  //クラスを付与
 } else {
  $('.NavMenu').removeClass('active'); //クラスを外す
 }
 });
});
</script>

以上で完了です。