【jQuery】スマホサイトでよく見るハンバーガーメニューの作り方

jQueryを読み込んでおく

GoogleのCDNからjQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

ソースコード

DEMO

HTML

<div class="menu_btn"></div>
<div id="navi">
  <ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
  </ul>
</div>

はじめ<div id="navi">をCSSで非表示にしておきます。

そして、その非表示になっている<div id="navi">をjQueryで表示したり非表示にしたりします。

JavaScript

$(function(){
  $(".menu_btn").click(function(){
    $("#navi").slideToggle();
    $(this).toggleClass('close');
  });
});

<div class="menu_btn">がクリックされたら、

• slideToggleで<div id="navi">を表示
• toggleClassでclass="menu_btn"にcloseを追加

します。

もう一度<div class="menu_btn">がクリックされたら、

• slideToggleで<div id="navi">を非表示
• toggleClassでclass="menu_btn close"のcloseを削除

します。

CSS

.menu_btn{
  width: 35px;
  height: 35px;
  background-image: url(画像のパス);
}
.close{
  background-position: -35px 0;
}
#navi{
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #eee;
}

#navi

前述の通り、はじめ<div id="navi">をdisplay:noneで非表示にしておきます。

表示されているときは、他の要素よりも上に配置されるようにz-index:100を指定。表示位置はtop:left:で調整します。

.menu_btn .close

CSSでボタンを作成することもできますが、今回は次のような画像（横75px縦35px）を用意してcloseあり・なしで切り替えます。

表示されているときはcloseが追加されているので「×」の位置を指定。非表示のときはcloseが削除されているので「三本線」の位置を指定します。