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

アマゾンセール情報はこちら!

今回は、結構あるあるな内容ですがハンバーガーボタンを作って、メニューの開閉をする方法について解説していきます。

情報の取捨選択ができるようになることも大事ですが、ここは一つ覚えておいて欲しいハンバーガーメニューの作り方を提案します。

目次

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

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

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

  • 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

おわりに

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

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