[CSS]スクリプト無しで、現在位置を表示するナビゲーション

スタイルシートで実装する、現在のセクションを表示するナビゲーションをCSSplayから紹介します。

デモのキャプチャ

Professional - Dropline with current page override - centered
デモ

デモでは、現在のページは「Service - Repair」に設定されています。
ナビゲーションのトップレベル・セカンドレベルをマウスでホバーすると、それぞれの箇所がハイライトし、フォーカスをはずすと「Service - Repair」にハイライトが戻ります。

現在のセクションを表示するために、HTMLには二つのclass(「current」「current_sub」を使用しています。

HTML

※該当箇所のみ抜粋。

対応ブラウザはIE6/7/8, Fx, Op, Safari(PC), Chromeとのことです。

また、ナビゲーションには背景が見えるように透過処理がされています。

デモのキャプチャ

ナビゲーションの透過で背景が見えます

sponsors

top of page

©2018 coliss