Ask the CSS Guyのエントリーから、CSSのみの簡単なナビゲーションからはじまり、最終的にはJavaScriptで現在位置を示すナビゲーションまでの実装をステップごとに解説したチュートリアルを紹介します。
how to switch the on state of navigation links for dynamic pages
最終形のデモ
チュートリアルのステップは、下記のようになっています。
- Example 1
ナビゲーションをリスト要素で実装。 - Example 2
スタイルシートで装飾。 - Example 3
スタイルシートで現在位置を実装。 - Example 4
onclickを使用して選択箇所を実装。 - Example 5
クリック時の不具合に対応。 - Example 6
最終形、現在位置を示すナビゲーション。 - Example 7
Example 6を使用して、パネルを切り替え。 - Example 8
jQueryを使用して、パネルを切り替え。
Post on:2008年5月1日
