ハンバーガーボタンを使ったメニューを作ろう

普段デジタルハリウッドSTUDIO福岡でWebデザインの先生をしています。
今回は、結構あるあるな内容ですがハンバーガーボタンを作って、メニューの開閉をする方法について解説していきます。

わざわざ書く理由としては、生徒さんが頑張って調べて作ってくるのですがネット上の情報が今の生徒さんに合っていないことがしばしば….(決して間違った情報ではないけど、初学者向けではない)
情報の取捨選択ができるようになることも大事ですが、ここは一つ覚えておいて欲しいハンバーガーメニューの作り方を提案します。

※ 学校によってカリキュラムが違うのでそれぞれあるかと思いますし、ネット上には素晴らしい記事ばかりです。
※ 自分が生徒さんのデザイン/コーディングに合わせた説明しながらといった部分を含んでいるので、詳細には書いていない部分もあります。

目次

カスタマイズしやすいハンバーガーメニューを意識して作ってみる

まずカスタマイズしやすいって部分を意識作りましょう。これが結構大事です。

よくある生徒さんが見つけてくる簡単と言われるハンバーガーメニュー

  • JavaScript不要で、CSSだけで簡単にできるハンバーガーメニュー
  • fontawesomeを使って簡単にできるハンバーガーメニュー

どちらも素晴らしいアプローチなことに変わりませんが、初めて学ぶ人にとってはこれが結構つまづきやすい。
理由を書くと以下のようになります。

  • JavaScript不要で、CSSだけでできるハンバーガーメニュー
    • CSSだけでできるものは、HTMLとCSSの理解度が高くないと実装が難しい。前提とする知識が初学者にとっては複雑。
    • JavaScriptを使わない = 簡単。ではない。
  • fontawesomeを使ったハンバーガーメニュー
    • fontawesomeという外部のライブラリを使う必要があるので手間がかかるし、新しく覚えることに時間を割く必要がある。
    • fontawesomeが簡単に感じるのは、大量に使うから。ハンバーガーメニュー1箇所のた目に使うことは簡単とは感じづらい

業界にいる方だと「え?そんなこともできないで大丈夫?」と思う方もいるかもしれません。
しかし教育現場では、個人個人の理解度や得意不得意に大きなばらつきがあります。なので、業界での簡単と、一般での簡単に大きな違いがあります。

簡単にカスタマイズできることを意識したハンバーガーメニュー

では私の考える簡単とはなんでしょうか?
とても単純で「習った知識でできること」です。

習った知識とはこんな感じ、「なんとか」が大事。

  • HTML:間違いはあるものの1枚ページを頑張ってなんとか書けた
  • CSS:positionとか擬似要素とかいまいちわからないけど、なんとかレイアウトできた
  • JavaScript:課題で少し触った

さて、この知識を持った状態で簡単なハンバーガーメニューの枠組みをつくるとこちら。

// ハンバーガーボタン
<button class="humbergermenu js-navBtn">
  <span></span>
  <span></span>
  <span></span>
</button>

// ナビゲーション:ハンバーガーボタンをクリックすると表示される
<nav class="nav js-navTarget">
  <ul class="nav__list">
    <li class="nav__item"><a href="">トップ</a></li>
    <li class="nav__item"><a href="">概要</a></li>
  </ul>
</nav>

<script>
$('.js-navBtn').click(function() { // クリックしたら、{}の中身を実行する
  $(this).toggleClass('-active'); // クリックした要素に、'-active'ってクラス名を付けたり外したりする
  $('.js-navTarget').fadeToggle(400);
});
</script>

初学者用で今後も使えるよって感じです。この記事を見せながら生徒さんに教える未来が見えます。

とにかく簡単にわかりやすく、かつ、今後もカスタマイズして使いやすいだけを意識して作りました。
さて細かく分解して解説していきます。

ハンバーガーボタン

まずは3本線になるハンバーガーメニューのボタン。
CSSは自由に書いてください。「humbergermenu」←この名前は説明用にわかりやすいものをつけているだけなので、自由に書き換えてください。

「js-navBtn」というクラス名は、最初に’js’と付くのでJavaScriptで使用するクラス名になっています。

// ハンバーガーボタン
<button class="humbergermenu js-navBtn">
  <span></span>
  <span></span>
  <span></span>
</button>

CSSは自由に書けばOK。CSSはこんな感じ、中身に書くものはデザインに合わせてください。
動きに必要な部分だけ書いておきます。

.humbergermenu{

}
.humbergermenu span{
  transition-duration: .4s;
}
// span要素の何番目の指定でCSSをつける場合
.humbergermenu span:nth-child(1){

}
.humbergermenu span:nth-child(2){

}
.humbergermenu span:nth-child(3){

}

このボタンをクリックすると、メニューが表示されてハンバーガーメニューがバッテンに変わります。その時HTMLが以下のように変わります。
「-active」ってクラス名が付きました。

// -activeというクラス名がついた
<button class="humbergermenu js-navBtn -active">
  <span></span>
  <span></span>
  <span></span>
</button>

ということは、クラス名がついた時にCSSが上書きされれば良いです。
以下のようになります。「.-active」がくっつきました。

.humbergermenu.-active{

}
.humbergermenu.-active span{

}
// span要素の何番目の指定でCSSをつける場合
.humbergermenu.-active span:nth-child(1){
  transform: rotate(45deg);
}
.humbergermenu.-active span:nth-child(2){
  opacity: 0;
}
.humbergermenu.-active span:nth-child(3){
  transform: rotate(-45deg);
}

ナビゲーションを書く

ナビゲーションですることは1つだけ。
「js-navTarget」というjs用のクラスをつけるだけ。

// ナビゲーション:ハンバーガーボタンをクリックすると表示される
<nav class="nav js-navTarget">
  <ul class="nav__list">
    <li class="nav__item"><a href="">トップ</a></li>
    <li class="nav__item"><a href="">概要</a></li>
  </ul>
</nav>

jQueryを書く

jQueryは理解できるまでは大変ですが、1つ1つの意味を検索していけば大丈夫です。
HTMLでJavaScript用につけていたクラス名がたくさん出てきますが、クラス名がどこのHTMLを示しているかわかりやすければOKです。

$('.js-navBtn').click(function() { // クリックしたら、{}の中身を実行する
  $(this).toggleClass('-active'); // クリックした要素に、'-active'ってクラス名を付けたり外したりする
  $('.js-navTarget').fadeToggle(400); // ナビゲーションを表示したり、非表示にしたりする
});

jQueryでやっている動きは3つ。
付けたり外したり、表示・非表示は「toggle」という言葉ついてる動作。

  1. js-navBtnをクリックしたら、中身を実行する
  2. クリックしたjs-navBtn ( this )に、-activeクラス付ける。もし、-activeクラスがついていたら外す
  3. js-navTargetを、ふんわり表示( fade )。表示されていたら、ふんわり非表示

わからない時に調べるポイントはこの辺でしょうか?
1行づつどんな意味があるのか?1単語づつにどんな意味があるのか?を考えながら調べてみてください。

  • 「$().click(function() とは」
  • jQuery thisって何
  • jQuery toggleClass
  • jQuery fadeToggle

おわりに

よくある「コピペで簡単」はデザインが違うので、ある程度理解度が上がっていないとほぼコピペできない….

最近ネット上でオンラインスクールが多く立ち上がっていたり、案の定炎上したりが多いですよね。
5年間教えていて思うのは….本当に大変。オンラインスクールで簡単にって感じには正直思えない。。。

教材を作るのだってとんでもない労力だろうし、生徒さん1人1人の理解度・習熟度に合わせて教え方を変えるのが大変です。
それだけこちらも知識を求められますしね。

楽しいからいいけど!

スクール選びは慎重に。
デジハリ出身なので、はっきりいえますけど、デジハリはめちゃくちゃ良いです。

よかったらシェアしてね!
  • URLをコピーしました!
目次