WEBサイトのグローバルナビゲーションのカレント表示を実装します。
カレント表示とは、例えばこのような感じです。
目次
カレント表示
今いるページのナビのリストだけに装飾をします。
これにより、ユーザーが現在どのページにいるかが分かりやすくなります。
HTML
準備 ①
各ページの<body>にクラスをつけましょう。
クラス名は任意です。
今回はこのようにクラスをつけました。
<!--トップページ index.html-->
<body class="top-page">
<!--事務所概要ページ about.html-->
<body class="about-page">
<!--業務案内ページ service.html-->
<body class="service-page">
<!--料金案内ページ price.html-->
<body class="price-page">
<!--解決事例ページ works.html-->
<body class="works-page">
<!--無料相談ページ contact.html-->
<body class="contact-page">
準備 ②
ナビの、<a>タグにもクラスをつけます。
<nav class="global-nav">
<ul>
<li><a href="index.html" class="top">トップ</a></li>
<li><a href="about.html" class="about">事務所概要</a></li>
<li><a href="service.html" class="service">業務案内</a></li>
<li><a href="price.html" class="price">料金案内</a></li>
<li><a href="works.html" class="works">解決事例</a></li>
<li><a href="contact.html" class="contact">無料相談</a></li>
</ul>
</nav>これで準備完了です。
続いて、CSSで装飾をします。
何をしたのか？？
各ページの<body>にクラスを付与することで、CSSで装飾する際に、ページを特定できます。
ナビの<a>タグにクラスを付与することで、<body>のクラスと、セットでCSSのセレクタに指定することで、
○○ページのナビの<a>タグだけをCSSで指定できます。
CSS
例えば事務所概要ページ(<body class=”about-page”> )にいるときに、
ナビの「事務所概要」( <a class=”about”> )だけに
スタイルを適用する場合は、このように書きます。
.about-page .global-nav ul li a.about{
border-bottom:2px solid #f46d19 ;
}
これで、.about-pageの中の、.aboutを指定できます。
そのほかのページもまとめて、CSSを書きます。
*======================================
カレント表示
========================================*/
.about-page .global-nav ul li a.about{
border-bottom:2px solid #f46d19 ;
}
.service-page .global-nav ul li a.service{
border-bottom:2px solid #f46d19 ;
}
.price-page .global-nav ul li a.price{
border-bottom:2px solid #f46d19 ;
}
.works-page .global-nav ul li a.works{
border-bottom:2px solid #f46d19 ;
}
.contact-page .global-nav ul li a.contact{
border-bottom:2px solid #f46d19 ;
}これだけで、移動したページのナビ部分だけ、スタイルが適用されます。
応用
これを応用すれば、特定のページにだけ他のページと違うスタイルを適用することもできますね。
使い方は、あなた次第です！
まとめ
カレント表示について解説しました。
仕組みを理解すると、めちゃめちゃ簡単です。
クラス名を変えたり、CSSを変えれば、いくらでも使いまわせるコードですから、是非コピペして保存してください。