HTML+CSS+jQueryでハンバーガーメニュー作り前編【第13話】

本記事では前回に引き続き課題制作の学習を記録しています。

RaiseTechのWordPress副業コースが気になっている方やプログラミングスクールってどんな感じなのか気になっている方は是非参考にしてもらえると嬉しいです。

[PR] 筆者が受講しているスクールはこちら

RaiseTechはAWS・Java・副業・デザイン・マーケティングに特化し現場レベルの学習ができるエンジニアリングスクールです。カリキュラムはもちろんあらゆるサポートが充実していることも特徴の1つです。

RaiseTechの無料説明会に参加してみる

404 NOT FOUND | 文系女子大生、プログラミング学習始めました。

文系女子大生がプログラミング学習を始めたお話

前回までの進捗状況

絶賛レスポンシブ化取り組み中です。
jQueryでの動き付けも楽しかったけどレスポンシブ化もそれ以上に楽しいです！

前回のお話はこちらから↓

レスポンシブをSassのmixinで爆速＆効率的に進める方法【第12話】

レスポンシブ化で必須のメディアクエリ。Sassのmixin機能を使えば「爆速」「短い」「スッキリ」なレスポンシブ化ができる!?この記事ではプログラミング初心者ならぜひ知っておきたい簡単に使えるSassでメディアクエリを使う方法についてご紹介します。

今日からはレスポンシブ最大の難所だったハンバーガーメニュー作りに取り掛かります…

ハンバーガーメニュー作り

こちらがハンバーガーメニュと言われるものです。3本線がハンバーガーのように見えることから名付けられているのですが、少々無理やり感が否めないですね…笑

🔎ハンバーガーメニュー作り方で調べて出てきた7つのサイトのコーディングを真似してみたのですが、

参考サイトの真似は全て失敗しましたー！

どこが上手くいかなかったのか記録したかったのですが初心者の私には厳しかったので失敗部分はショートカットさせてもらいます。ごめんなさい🙇🏻‍♀️

失敗を繰り返し思いついた作り方が

必殺、つまみ食いコーディング！

というものです。
参考サイトのうまくいった部分だけを集めてきて自分流のハンバーガーメニューを作ろうと思います！

ハンバーガーボタン
ボタンクリックで×ボタンに変える
メニューとサブメニュー
メニューホバーでサブメニュー出現
ハンバーガーボタンクリックでメニュー出現
メニュー右端の＋とーマーク
メニューホバーで＋をーに変える

この辺が必要ですかね。気が遠くなりますが上から作りましょう。

ハンバーガーボタンを作る

<!-- ハンバーガーボタン -->
<div class="ham-btn">
 <span class="ham-btn__line"></span>
 <span class="ham-btn__line"></span>
 <span class="ham-btn__line"></span>
</div>

.ham-btn{
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  @includehamburger{
   display: block;
  };

//ライン共通スタイル指定
  &__line{
   position: absolute;
   left: 14px;
   top: 10px;
   background-color: #2498b3; //線の色
   width: 23px; //線の長さ
   height: 2px; //線の太さ
   transition: all　0.3s; //あとで動きをつけるため

//個々ライン位置指定
   &:nth-of-type(1){
    top: 15px;
   }
   &:nth-of-type(2){
    top: 24px;
   }
   &:nth-of-type(3){
    top: 33px;
   }
  }
}

こちらはとあるサイトから骨組みだけを参考にして値は自分で目視で指定しました。

HTMLはとてもシンプルですがSCSS（CSS）を指定するのがとにかく長い…。

@includeの部分で表示させるプロパティを指定する
positionプロパティを正しいセレクタに指定する

この2点が指定できればあとは目視で位置や長さを調整するだけなので難しいことはありません。

ハンバーガーボタンクリックで×ボタンに変える

まずは × をSCSSで作っていきましょう。

.ham-btn{
     :
     :
//追加
 &.active{
  background-color: #2498b3;
 .ham-btn__line{
   transition: all 0.3s;
   &:nth-of-type(1){
    transform: rotate(45deg);
    background-color: #fff;
    top: 24px;
   }
   &:nth-of-type(2){
    width: 0px;
   }
   &:nth-of-type(3){
    transform: rotate(-45deg);
    background-color: #fff;
    top: 24px;
   }
  }
 }
}

ここでHTMLでは指定していないactiveというクラスの指定が出てきました。これはどういう事かというと、

$(function(){

 $('.ham-btn').click(function(){
 $(this).toggleClass('active');
 });

});

jQueryでtoggleメソッドの1つであるtoggleClassで.ham-btnにactiveクラスを付与してあげています。

toggle(トグル)って？

toggleとは要素の表示/非表示を簡単に実装できるメソッド

クリックしたら表示（show）、クリックしたら隠す（hide）を作るときに別々のメソッドを書く手間を省きtoggleのみで実装することができる優れたメソッドです。

その1つであるtoggleClassメソッドはある要素にクラスを追加⇄削除を行うことができるメソッドです。

今回のようにクリックで3本線⇄閉じるボタンとスタイルを変えたい時に3本線用のクラスと閉じるボタン用のクラスの入れ替えを行ってくれます。

画像に alt 属性が指定されていません。ファイル名: b0e08c500b2b3bb1e9c9d19366f71dc2-300x185.png

図でtoggleClassがどのように動いてくれるかを示すとこのような感じです。
基本的にはサイトを開いたときのスタイルではないクラスの方（今回ならバツボタン）をtoggleClassのカッコ内に入れます。

ここまでできたらフロント側を見てみましょう。

できていますね！

メニューとサブメニューを作る

ボタンは完成したのでクリックで表示されるメニュー部分を作りましょう。
今回は自己流なのでメニューもハンバーガーメニュー用のクラスをつけて新たに組んでいきます。

画像に alt 属性が指定されていません。ファイル名: front01-1-2-e1613461979779-300x132.jpg

画像がボケまくっております。すみません…。<ul>と<li>でPCの時と同じように作っています。
ではサブメニューは一旦display:noneで非表示にしてメニュー部分をまずは整えましょう。

.h-nav{
 display: none;
 position: absolute;
 top: 50px;
 width: 100%;
 @include{
  display: block;
 };
 .h-menu{
  background-color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  a{
   padding: 11.5px 0 11.5px 10px;
   color: #131d34;
  &:hover{
   background-color: #f3fafb;
  }
  .h-submenu{
   display: none;
  }
 }
}

ポイントは@include内で表示させる指定をすることとpositionとtopプロパティで位置を調節することです！
ちなみにdisplay: noneを指定しないと以下のようになるので注意しないとですね。

では次はサブメニューを整えてあげましょう。

.h-submenu{
// display: none;
 li{
  font-weight: 400;
  a{
   padding: 11.5px 0 11.5px 25px;
   &:hover{
    background-color: #f3fafb;
   }
  }
 }
}