今回は、結構あるあるな内容ですがハンバーガーボタンを作って、メニューの開閉をする方法について解説していきます。
情報の取捨選択ができるようになることも大事ですが、ここは一つ覚えておいて欲しいハンバーガーメニューの作り方を提案します。
カスタマイズしやすいハンバーガーメニューを意識して作ってみる
まずカスタマイズしやすいって部分を意識作りましょう。これが結構大事です。
よくある生徒さんが見つけてくる簡単と言われるハンバーガーメニュー
- 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」という言葉ついてる動作。
- js-navBtnをクリックしたら、中身を実行する
- クリックしたjs-navBtn ( this )に、-activeクラス付ける。もし、-activeクラスがついていたら外す
- js-navTargetを、ふんわり表示( fade )。表示されていたら、ふんわり非表示
わからない時に調べるポイントはこの辺でしょうか？
1行づつどんな意味があるのか？1単語づつにどんな意味があるのか？を考えながら調べてみてください。
- 「$().click(function() とは」
- jQuery thisって何
- jQuery toggleClass
- jQuery fadeToggle
おわりに
よくある「コピペで簡単」はデザインが違うので、ある程度理解度が上がっていないとほぼコピペできない….