今回はヘッダーナビゲーションをカスタマイズします。 実習はありませんが、講座と一緒に設定してみて下さい。
- ナビバーのクラスを切り替える（トップでは透明・スクロールすると背景色を白に）
- マウスオーバー時にで下線を表示させる
- 現在見ている場所にactiveクラスが付与されるようにする
1.ナビバーのクラス切替
スクロールに応じてクラスを切り替えることで、表示位置に応じてナビゲーションの配色を変えます。
①jQueryでクラスを切り替える
まず、ヘッダーナビゲーション(navタグ部分)に対してidを指定します。 解説ではIDを「headernav」にしています。
index.html
次に、jsファイルにクラスを切り替える指示を書きます。 クラス切り替えは、前回のレッスンで使った方法とほぼ同じです。
demo.js
追加するように指示したクラス「navbar-trans」「navbar-white」に対して、簡単にcssを設定します。
style.css
ブラウザでクラスの追加が行われているか確認します。
スクロールでナビバーの色が変わり、シャドウが付いた状態になっているでしょうか？ 文字が見えませんが、上図のような状態になればjsファイルでの設定はうまく行っています。
あとはcssで文字色・カラーが切り替わるときの変化時間を設定していきましょう。
②cssで表示を調整
今まで指定していた「navbar-dark」クラスを削除してください。 新たに作成した「navbar-trans」クラスを加えます。
index.html
cssファイルで、transitionプロパティを使って変化時間を設定します。
style.css
ブラウザで違和感なくクラスの切り替えが出来ているかを確認してみましょう。
③スマホ幅でのトグルアイコン
画面幅を縮めて格納メニューに切り替わると、トグルアイコン（ハンバーガーアイコン）が消えてしまっています。
これはトグルアイコンを呼び出す設定が「navbar-dark」にあったためです。 「navbar-dark」クラスを削除したのでアイコンが表示されなくなっています。
もう一度「navbar-dark」クラスを加えれば簡単… ですが、ナビゲーションバーの色が白の時には、トグルアイコンの色も青で揃えた方が綺麗ですよね。そうなるように、独自にcssで設定してしまいましょう。
まず「navbar-dark」クラスを一時的に戻すか、bootstrap ナビバーのページを開きます。
検証ツールを使ってトグルアイコンのurlをコピーします。
style.cssで「.navbar-toggler-icon」をセレクタにして、コピーしてきたurlをペーストします。 先に「.navbar-trans」内のトグルアイコンを設定してみましょう。
style.css
コピーしてきたsvgのコードは画面上に描画するための命令も入っています。
- 赤線で囲った部分
stroke=は色の指定 - 白い点線で囲った
stroke-width=などの部分で線の太さや角の処理
をそれぞれ指定しています。
赤線内の値を変更すると、設定したナビバーに合うように色が変更できます。 コピーして.navbar-whiteの方も設定して下さい。
transitionを設定すれば完成です。
style.css
保存して、ブラウザで表示を確認しましょう。
2.マウスオーバーで下線表示
ヘッダーメニューの項目に、マウスカーソルを合わせた時の動きを設定します。
解説では疑似要素（::after）を使い、cssのみで設定してみます。
style.css
ブラウザで動作を確認してみてください。
3.現在地にactiveクラスを付ける
現在見ている位置がナビゲーション上でマークされるようにします。
bootstrapで設定されている「スクロールスパイ」という機能を使用します。 この機能は、現在地部分に「active」クラスを追加してくれます。
スクロールスパイを有効にするには、設定用のjsファイルで以下を指定する必要があります。
- 監視する要素 → ページ全体＝body
- activeクラスを付けたい要素 → #headernav
demo.js
jsファイルで設定した監視する要素（上記の場合はbody）部分に、下記の記述を加えます。
index.html
下線が表示されるように「active」クラスのcssを設定しましょう。 ほぼマウスホバーで下線を表示させたスタイル指定と同じです。
style.css
ブラウザで表示を確認してみましょう。
画面表示とズレてしまっていますが「active」クラス追加は機能していますね。 次はピッタリの位置で「active」クラスが付くように調整します。
● active位置の調整
デモ作成で「active」クラス追加位置がズレている原因は、 section部分ではなく見出しを囲うdivにマージンを加えていたためでした。
ナビバーと重なるので、余計にズレを感じますね。
今回は素直にmarginの指定を変更してみます。
追加した「pt4rem」クラスにはcssでpadding-top: 4rem;を設定しています。
これで「active」が付けられる位置と表示位置が大体合うようになりました。
スマホの表示チェック
スマホサイズでメニューを開くと、ちょっと読みにくいですよね。
特に「navbar-trans」の時は背景色が透明なので、文字と被って読みにくくなっています。 もう少し見やすくするためにメディアクエリ内で調整していきます。
ホバーの設定は無くても問題ありませんが、お気に入りバーをサイドに出しているなどパソコンでも画面幅が小さい場合もあるので一応設定しています。
ブラウザで確認してみましょう。
