[CSS]スクリプト無しで、現在位置を表示するナビゲーション
Post on:2010年4月1日
sponsors
スタイルシートで実装する、現在のセクションを表示するナビゲーションをCSSplayから紹介します。
Professional - Dropline with current page override - centered
デモ
デモでは、現在のページは「Service - Repair」に設定されています。
ナビゲーションのトップレベル・セカンドレベルをマウスでホバーすると、それぞれの箇所がハイライトし、フォーカスをはずすと「Service - Repair」にハイライトが戻ります。
現在のセクションを表示するために、HTMLには二つのclass（「current」「current_sub」を使用しています。
HTML
※該当箇所のみ抜粋。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <li class="current">SERVICES <ul> <li><a href="#url">Printing</a></li> <li><a href="#url">Servicing</a></li> <li class="current_sub"><a href="#url">Repair</a></li> </textarea> |
対応ブラウザはIE6/7/8, Fx, Op, Safari(PC), Chromeとのことです。
また、ナビゲーションには背景が見えるように透過処理がされています。
ナビゲーションの透過で背景が見えます
sponsors
