モバイル向けボタン

モバイル向けレイアウトでのみ表示される、ナビゲーションを開閉するためのボタンを作成する

タップすると切り替わるボタンの表示

Labo 235 ～ 237 で、（グローバル）ナビゲーションの表示・非表示を切り替える機能を組み込む

Labo 235 ではボタンを作成する

Labo 236 ではナビゲーションを作成する

Labo 237 ではナビゲーションの表示・非表示を切り替える JavaScript プログラムを読み込む

ナビゲーションの表示・非表示切り替えはモバイル向きのレイアウトのときだけ機能する

ナビゲーションの表示・非表示切り替えの機能の動作を確認する

ボタンを一度タップするとナビゲーションが表示され、もう一度タップすると非表示になる

同時にボタンの見た目も変わる

ボタンの見た目を変えるのは、要素（<div class="navbtn"> </div>）に適用する背景画像を切り替えることで実現する

<div class="navbtn"> にクラス close を追加したり削除したりすることで、適用されるスタイルを変えるようにする

要素にクラスを追加・削除するのは JavaScript プログラムで制御する

背景画像の指定そのものは CSS で行う

style.css には 2つのスタイルを用意する

ナビゲーションが表示されている時のボタンの CSS を編集、確認する時は、HTML の <div class="navbtn"> </div> に手動で close クラスを追加する

ボタンの 2つの状態を作る必要があり、JavaScript を読み込むまでは正式の動作確認ができない

開発ツールを使って簡易的な表示のチェックはできる