[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とのことです。
また、ナビゲーションには背景が見えるように透過処理がされています。
ナビゲーションの透過で背景が見えます
Post on:2010年4月1日
Comments
freewebdev.jp
on 2010年4月7日
スクリプト無しで、現在位置を表示するナビゲーション
「Professional – Dropline with current page override – centered」
スタイルシートで実装する、現在のセクションを表示するナビゲーションをCSSplayから紹介します。
デモでは、現在のページは「Service –…