jQueryでクリックして画像を切り替えるスマホ用メニューを作成する

Webサイトのスマートフォンのメニューボタンでよく見かけるデザインが三本ラインのハンバーガーメニューだと思います。

ハンバーガーメニューに関してはCSSのみでOPENとCLOSEのデザインを作りメニューの表示・非表示もCSSでできますので、すべてCSSのみでスマートフォン用のメニューを実装することができます。少し高度な技術は苦手という方は画像を用意して、クリックでOPENとCLOSEの画像を切替えるといった処理をさせると良いかもしれません。

ここではjQueryでクリックして画像を切り替えるスマホ用メニューを作成する方法をご紹介します。

スマホ用メニューの作成

サンプルとして、HTMLは下記の用に構築していきます。

画像を三本ラインの「icon-menu.png」、メニューを開いている時に閉じるためのバツマークの「icon-menu-close.png」の画像を用意しておきます。はじめは三本ラインの画像をセットします。
あとはメニュー部分を構築しておきます。

HTML

<header>
  <h1>スマホ用メニュー サンプル</h1>
  <img src="images/icon-menu.png" id="menu-btn">
  <div id="menu-conts">
    <ul>
      <li><a href="#">menu01</a></li>
      <li><a href="#">menu02</a></li>
      <li><a href="#">menu03</a></li>
      <li><a href="#">menu04</a></li>
    </ul>
  </div>
</header>

CSSではメニューボタンの画像をポジションを右上に配置しておきます。あとはスマートフォン用の画層は倍に書き出すことを考えて画像のサイズを調整しておきます。（ポジション、画像サイズは実際作成するデザインに合わせてください。）
メニューは最初に非表示にしておきます。あとでjQueryで表示・非表示をコントロールしますので。

CSS

#menu-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
}
 
#menu-conts {
  display: none;
  background: rgba(0, 0, 0, .4);
  position: absolute;
  top: 60px;
  width: 100%;
  z-index: 1;
}
 
#menu-conts a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 14px 0;
  transition: all 0.5s ease;
}
 
#menu-conts a:hover {
  background: rgba(0, 0, 0, .6);
}

メニュー項目部分のデザインは、ご自身のデザインに合わせてもらえば良いです。

パソコン用とモバイル用のメニューのデザインはメディアクエリで切替えてコントロールしましょう。
メディアクエリ（Media Queries）を利用したレスポンシブWebデザインのCSSのベースについては、以下の記事でご紹介しています。

レスポンシブWebデザインのHTMLとCSSの基礎と学習方法

jQueryで表示の切り替え

jQueryでメニュー画像の切り替えとメニューの表示・非表示の処理を行います。
メニュー画像がクリックされたら実行されるプログラムです。
onメソッド「on()」を利用してクリック処理を実装します。clickメソッド「click()」を利用しても良いですが複数イベントを定義できないといったデメリットがあるのでonメソッドが推奨されています。クリック処理はなるべくonメソッドを利用したプログラムに慣れておくと良いでしょう。

わかりやすく1行ごとにコメントで処理の内容を載せておきます。

jQuery

$(function() {
　　$('#menu-btn').on('click', function(){ //メニューボタンがクリックされたら関数を実行
　　　　$(this).toggleClass("on"); //メニューボタンにクラス「on」をトグルで付けたり消したり
　　　　if($(this).hasClass("on")) { //クラス「on」が付いていた時の処理
　　　　　　$(this).attr('src','images/icon-menu-close.png'); //attrメソッドで画像をclose用に変更
　　　　　　$("#menu-conts").slideDown(); //メニューの項目を表示
　　　　} else { //クラス「on」が付いていない時の処理
　　　　　　$(this).attr('src','images/icon-menu.png'); //attrメソッドで画像を従来のものに変更
　　　　　　$("#menu-conts").slideUp(); //メニューの項目を非表示
　　　　}
　　});
});

toggleClassメソッドで画像に対して「on」のクラスを付けたり消したりさせます。その後、if文でクラス「on」が付いているかいないかで実行する処理を分岐させます。
onが付いていればattrメソッドで画像をclose用に変更してslideDownメソッドでメニューを表示させます。クラスが付いていなければメニュー画像を従来の三本ラインに変更してslideUpメソッドでメニューを非表示にします。