【 WEBデザイン 】 ３ステップで速攻実装！！ 「カレント表示」 FirE♯521
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を変えれば、いくらでも使いまわせるコードですから、是非コピペして保存してください。
ポートフォリオサイト
現在別バージョンも制作中です！