ハンバーガーボタンの作り方

お久しぶりです。コウヤです。

今まで、Python関連の記事を中心に書いておりましたが、この度、WebデザインやWebコーディングのスキルを強化して、Webコーダーをまずは目指していきたいという気持ちが固まりました。
現在は副業または業務で活かすことを念頭にスキル強化中です。

さて、今回のWeb作成の課題で、ハンバーガーメニューの作り方を学ぶ機会があったので、実装方法を紹介したいと思います。

皆さんもスマートフォンでWebサイトを見ているときに、以下の画像にあるハンバーガーボタンを見かけることが多いと思います。

さて、このボタンを押下すると、以下のように背景が薄く白くなり、ページ内リンクが出るようになりますが、今回はこれを実装することを考えていきたいと思います。

ここまでの背景デザインまで作成はしませんが、簡単に作れるように背景だけは変えていきたいと考えています。

必要な知識

HTML、CSS、jQueryの基本的知識

書き方について

まずはフォルダ構成は以下の通りとしております。

jQueryをダウンロードする

まずはこのハンバーガボタンを実装するに当たって、前提としてjQueryを導入する必要があります。
今後いろいろな機能を実装するので、あらかじめダウンロードしておきましょう。
https://jquery.com/

そして以下から右クリックしてダウンロードを行う。

今回以下のフォルダ構成にしていますので、ダウンロードしたら、以下のjsフォルダ内に置きます。
今回はjquery-3.7.0.min.jsというファイル名ですが、バージョンが上がり次第、名前は変わります。

jQueryを参照させるために、htmlファイルのheadタグ内に以下のコードを埋め込みます。

index.html

    <script src="js/jquery-3.7.0.min.js"></script>

これでjQueryの準備は完了です。

ハンバーガーボタンの作り方

次に、ハンバーガーボタンの作り方について説明します。

その前に、ハンバーガーボタンは基本的にスマートフォンなどの小型デバイスでしか使用しないため、以下Chrome上で作業するときには画像のように横幅をiPhone SEサイズにしてください。
（下記のように作成するのが目的です）

まずはbodyタグ内に以下の内容を記載します。ハンバーガーボタンで使用するbuttonのクラス名はfv__hamburgerとします。

index.html

    <header id="fv">
        <button class="fv__hamburger">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>

    </header>

CSSで以下のように設定します。
ここで背景はハンバーガーボタンを使用したことが分かりやすいように青にしておきます。

style.css

#fv {
  background-color: #00f;
  height: 667px;
  position: relative;
}

.fv__hamburger {
  cursor: pointer;
  position: fixed;/*スクロールしても固定*/
  border: 0px;
  top: 20px;
  right: 20px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);/*ボタンに影を付ける*/
  background: #c89932;
  height: 48px;
  width: 48px;
  border-radius: 50%;/*ボタンを円形にしている（ここを変更することで四角形も可能）*/
  z-index: 10;/*最前面にくるように数値を大きくしている*/
}

すると、以下のようにボタンができます。

そこに3つの横線を入れていきます。上記CSSの下に以下の内容を追記します。

style.css

#fv {
※上と同じ
}

.fv__hamburger {
※上と同じ
}


.fv__hamburger span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 15px;
  height: 2px;
  border-radius: 2px;
  background: #eee;
  width: 18px;
}

すると以下のように1本のみになるので、これを3本線にしていきます。

次に3本線になるように設定していきます（この3本線の形がハンバーガーのため、その名がついています）

index.html

    <header id="fv">
        <button class="fv__hamburger">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>

    </header>

上記spanにそれぞれ位置を指定します。

style.css

#fv {
※上と同じ
}

.fv__hamburger {
※上と同じ
}


.fv__hamburger span {
※上と同じ

}

.fv__hamburger span:nth-child(1) {
  top: 18px;
}

.fv__hamburger span:nth-child(2) {
  top: 23px;
}

.fv__hamburger span:nth-child(3) {
  top: 28px;
}

すると以下のようになります。

リンクを表示させる

次にハンバーガーボタンを押下したした際に、✕となるように設定をしていきます。それと同時にリンク一覧を表示させることを考えていきます。

背景を変えてリンクを表示

↓

index.html

    <header id="fv">
        <button class="fv__hamburger">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>


        <!-- リンク表示 #sp_bg-->
        <div id="sp__bg">
          <ul class="nav__menu">
              <li class="nav__menu_item"><b>リンク一覧</b></li>
              <li class="nav__menu_item"><a href="#about">この農園について</a></li>
              <li class="nav__menu_item"><a href="#product">メニュー一覧</a></li>
              <li class="nav__menu_item"><a href="#info">お知らせ</a></li>
              <li class="nav__menu_item"><a href="#FAQ">FAQ</a></li>
              <li class="nav__menu_item"><a href="#access">アクセス</a></li>
              <li class="nav__menu_item"><a href="#inquiry">お問い合わせ</a></li>
          </ul>
        </div> 
    </header>

同時にCSSの方も設定していきます。

style.css

#fv {
※上と同じ
}

.fv__hamburger {
※上と同じ
}

.fv__hamburger span {
※上と同じ
}

.fv__hamburger span:nth-child(1) {
※上と同じ
}

.fv__hamburger span:nth-child(2) {
※上と同じ
}

.fv__hamburger span:nth-child(3) {
※上と同じ
}

#sp__bg {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  z-index: 1;
}

#sp__bg .nav__menu {
  padding-top: 61.6px;
  font-size: 16px;
  line-height: 23px;
  color: #475950;
} 

#sp__bg .nav__menu a {
  font-weight: 700;
}

#sp__bg .logo_sp {
  margin-bottom: 10.6px;
}

#sp__bg .nav__menu .logo3 {
  margin-bottom: 50px;
}

#sp__bg .nav__menu_item {
  margin-bottom: 16px;
}

#sp__bg .nav__menu_item:nth-child(1) {
  font-size: 26px;
  font-weight: 700;
  color:#c89932;
}

すると以下のように表示がされます。背景は先程まで青だったのに、今は薄い青色になっています。

これは、CSSの#sp__bgにおいて、backgroundを
background: rgba(255, 255, 255, 0.9);
としているためです。

.css

#sp__bg {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  z-index: 1;
}

このままではこのページを表示した瞬間から背景が見えずにいきなりリンクが表示されている状態ですので、これをjQueryを使って操作していきます。

まず、jsフォルダ内にscript_jQ.jsというファイルを作成します。

そして、以下のコード

.html

    <script src="js/script_jQ.js"></script>

を</head>の直前に置きます。

そして、以下のように記載する。
このように記載することでリンクを一旦消すことができる。

script_jQ.js

$(function(){

    //リンクを消す
	$('#sp__bg').hide();

});

#sp__bg（<div id="sp__bg">で囲まれた箇所）を一旦hide()メソッドで隠しています。

ボタンを押下した際に✕にする。

先程リンクをhide()メソッドで隠しましたが、ハンバーガーボタンを押下した際に以下のように✕にすることを考えてみます。

そのためにはまず✕のデザインをするためにCSSに内容を追加していきます。

style.css

#fv {
※上と同じ
}

.fv__hamburger {
※上と同じ
}

.fv__hamburger span {
※上と同じ
}

.fv__hamburger span:nth-child(1) {
※上と同じ
}

.fv__hamburger span:nth-child(2) {
※上と同じ
}

.fv__hamburger span:nth-child(3) {
※上と同じ
}

#sp__bg {
※上と同じ
}

#sp__bg .nav__menu {
※上と同じ
} 

#sp__bg .nav__menu a {
※上と同じ
}

#sp__bg .logo_sp {
※上と同じ
}

#sp__bg .nav__menu .logo3 {
※上と同じ
}

#sp__bg .nav__menu_item {
※上と同じ
}

#sp__bg .nav__menu_item:nth-child(1) {
※上と同じ
} 

.fv__hamburger.active span:nth-child(1) {
    top: 30px;
    left: 15px;
    transform: translateY(-6px) rotate(45deg);
    width: 18px;
}

.fv__hamburger.active span:nth-child(2) {
    opacity: 0;
}

.fv__hamburger.active span:nth-child(3) {
    top: 18px;
    left: 15px;
    transform: translateY(6px) rotate(-45deg);
    width: 18px;
}

ボタンが押下されたときには、.fv__hamburger.activeという名前のセレクタにしています。
今追加したCSSでは✕のデザインになっています。（ただし、表向きにはまだ✕の表示はされていません。）
ボタンの真ん中の線（span:nth-child(2)）をopacity:0;で透明にして、上（span:nth-child(1)）と下（span:nth-child(3)）の線をtransformを使って6px分上または下に移動して45度斜めにしたり、topの位置なども調整しています。

↓

前述の通り、表向きにはまだ✕の表示はされていません。
理由として、以下のように、buttonクラスがfv__hamburger.activeとなっていないからです。

.html

        <button class="fv__hamburger">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>

これを class="fv__hamburger.active" にするために、jQueryで操作をしていきます。
script_jQ.jsファイルに追記をします。

script_jQ.js

$(function(){

    //リンクを消す
	$('#sp__bg').hide();

    //もし、.fv__hamburger（ハンバーガーボタンが）がクリックされたら...の内容を書く
	$('.fv__hamburger').click(function(){
        //この中にクリックした際の内容を記載する

	});
});

実際にクリックされたときの内容を記載する。

script_jQ.js

$(function(){

    //リンクを消す
	$('#sp__bg').hide();

    //もし、.fv__hamburger（ハンバーガーボタンが）がクリックされたら...の内容を書く
	$('.fv__hamburger').click(function(){

        //もし、ハンバーガーボタンに.activeクラスが付与(hasClass)されていた場合
		if($('.fv__hamburger').hasClass('active')){

            //こちらはボタンが✕の状態の処理
			$('#sp__bg').fadeOut(300);
			$(this).removeClass('active');

		}else{

            //こちらはボタンが三本線の状態の処理
			$('#sp__bg').fadeIn(300);
			$(this).addClass('active');

		}

	});
});

ここでifの条件

$('.fv__hamburger').hasClass('active')

についてですが、 .fv__hamburder に active クラスがあるかどうかを判定しています。そのために hasClass() メソッドを用いています。
つまり以下の状態であるかどうかを判断しようとしています。以下の状態（つまりボタンが✕の状態）であればTrueとなり、

以下の状態であればFalseとなります。

まずは先にelseの部分（今回であればFalseの場合）について説明していきます。

.js

    //こちらはボタンが三本線の状態の処理
    $('#sp__bg').fadeIn(300);
    $(this).addClass('active');

から確認してみます。
ボタンが三本線だった際に、以下の#sp__bgの内容を表示させる必要があります。

↓

そのために、
$('#sp__bg').fadeIn(300);
でフェードインさせます。この例では300msかけてフェードインさせていますが、時間の調整は可能です。

さらに、
$(this).addClass('active');
でactiveクラスをadd（追加）しています。その証拠にChromeのコンソールを見ると以下のようにactiveが表示されているのが分かります。

この状態は、以下のactiveの内容

.css

.fv__hamburger.active span:nth-child(1) {
    top: 30px;
    left: 15px;
    transform: translateY(-6px) rotate(45deg);
    width: 18px;
}

.fv__hamburger.active span:nth-child(2) {
    opacity: 0;
}

.fv__hamburger.active span:nth-child(3) {
    top: 18px;
    left: 15px;
    transform: translateY(6px) rotate(-45deg);
    width: 18px;
}

が稼働中ということが言え、ボタンが✕となります。

ボタンが✕の状態で押下した際に三本線にする。

次に、if条件が以下のとき、

.js

    //こちらはボタンが✕の状態の処理
    $('#sp__bg').fadeOut(300);
    $(this).removeClass('active');

について確認していきます。

これは先程のと逆の対応をしていることが分かります。つまり以下の状態

となっているため、

$('#sp__bg').fadeOut(300);
でフェードアウトを300msかけて行い、リンク一覧と背景を消しています。

同時にボタンを✕から三本線にする必要があるので、
$(this).removeClass('active');
でactiveがついていたものをremoveしてクラスを削除していることになります。結果、以下のように三本線に戻るようになります。

リンクをクリックした際の動作

以下の状態で、

リンクをクリックすると、本来であればそのページ内に遷移するようになります（遷移は今回実装はしません）が、現状はリンクをクリックしても「リンク一覧」の表示は消えない状態となっています。
このままだと、ページが遷移したとしても、上記の画像のままリンクが表示されたままになってしまいます。これを解決していきたいと思います。

今、html上では以下のようになっていますが、

.html

    <!-- リンク表示 #sp_bg-->
    <div id="sp__bg">
      <ul class="nav__menu">
          <li class="nav__menu_item"><b>リンク一覧</b></li>
          <li class="nav__menu_item"><a href="#about">この農園について</a></li>
          <li class="nav__menu_item"><a href="#product">メニュー一覧</a></li>
          <li class="nav__menu_item"><a href="#info">お知らせ</a></li>
          <li class="nav__menu_item"><a href="#FAQ">FAQ</a></li>
          <li class="nav__menu_item"><a href="#access">アクセス</a></li>
          <li class="nav__menu_item"><a href="#inquiry">お問い合わせ</a></li>
      </ul>
    </div>

ここで、各リストのリンク（ .nav__menu_item ）をクリックした際にフェードアウトして消したい、もしくは背景の白い部分をクリックしてもフェードアウトして消すことをしたいため、#sp__bgの部分をクリックしてもフェードアウトして消していこうと思います。

script_jQ.js

$(function(){

//リンクを消す
	$('#sp__bg').hide();
	$('.fv__hamburger').click(function(){

        //※中身省略

	});
	
	//背景の白い部分、またはリンクをクリックした際に表示が消えるようにする
	$('#sp__bg, nav__menu_item').click(function(){
		$('#sp__bg').fadeOut(300);
		$('.fv__hamburger').removeClass('active');
	});

});

以下のように、リンクをクリックしたり、背景をクリックしてもフェードアウトしてリンク一覧が消えることが確認できます。

↓

これでハンバーガメニューボタンの実装が完了しました。

コードまとめ

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-3.7.0.min.js"></script>

    <title>ハンバーガーメニューの作り方</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

    <!--jQuery読み込み-->
    <script src="js/script_jQ.js"></script>
</head>
<body>




    <!--first view(fv)-->
    <header id="fv">
        <button class="fv__hamburger">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <!-- スマートフォンに表示 #sp_bg-->
        <div id="sp__bg">
          <ul class="nav__menu">
              <li class="nav__menu_item"><b>リンク一覧</b></li>
              <li class="nav__menu_item"><a href="#about">この農園について</a></li>
              <li class="nav__menu_item"><a href="#product">メニュー一覧</a></li>
              <li class="nav__menu_item"><a href="#info">お知らせ</a></li>
              <li class="nav__menu_item"><a href="#FAQ">FAQ</a></li>
              <li class="nav__menu_item"><a href="#access">アクセス</a></li>
              <li class="nav__menu_item"><a href="#inquiry">お問い合わせ</a></li>
          </ul>
        </div> 
    </header>
  </body>
</html>

.css

@charset "UTF-8";
/*ベース
*********************/
body {
  color: #475950;
  font-family: "Noto Sans JP", sans-serif;
}

a {
  text-decoration: none;
  color: #475950;
}



/*HEADER(first view)
*********************/
#fv {
  background-color: #00f;
  height: 667px;
  position: relative;
}

.fv__hamburger {
  cursor: pointer;
  position: fixed;
  border: 0px;
  top: 20px;
  right: 20px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  background: #c89932;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  z-index: 10;
}

.fv__hamburger span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 15px;
  height: 2px;
  border-radius: 2px;
  background: #eee;
  width: 18px;
}

 .fv__hamburger span:nth-child(1) {
  top: 18px;
}

.fv__hamburger span:nth-child(2) {
  top: 23px;
}

.fv__hamburger span:nth-child(3) {
  top: 28px;
}

  .fv__hamburger.active span:nth-child(1) {
    top: 30px;
    left: 15px;
    transform: translateY(-6px) rotate(45deg);
    width: 18px;
  }

  .fv__hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .fv__hamburger.active span:nth-child(3) {
    top: 18px;
    left: 15px;
    transform: translateY(6px) rotate(-45deg);
    width: 18px;
  }


/*スマートフォン　メニュー設定
************/


#sp__bg {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  z-index: 1;
}

#sp__bg .nav__menu {
  padding-top: 61.6px;
  font-size: 16px;
  line-height: 23px;
  color: #475950;
} 

#sp__bg .nav__menu a {
  font-weight: 700;
}

#sp__bg .logo_sp {
  margin-bottom: 10.6px;
}

#sp__bg .nav__menu .logo3 {
  margin-bottom: 50px;
}

#sp__bg .nav__menu_item {
  margin-bottom: 16px;
}

#sp__bg .nav__menu_item:nth-child(1) {
  font-size: 26px;
  font-weight: 700;
  color:#c89932;
}

script_jQ.js

$(function(){

//リンクを消す
	$('#sp__bg').hide();
	$('.fv__hamburger').click(function(){

		//もし、ハンバーガーボタンに.activeクラスが付与されていた場合
		if($('.fv__hamburger').hasClass('active')){
			$('#sp__bg').fadeOut(300);
			$(this).removeClass('active');
		}else{
			$('#sp__bg').fadeIn(300);
			$(this).addClass('active');
		}

	});
	
	//リンクをクリックした際に表示が消えるようにする
	$('#sp__bg, nav__menu_item').click(function(){
		$('#sp__bg').fadeOut(300);
		$('.fv__hamburger').removeClass('active');
	});

});