[JS]現在位置を示すナビゲーションを作成するチュートリアル

Ask the CSS Guyのエントリーから、CSSのみの簡単なナビゲーションからはじまり、最終的にはJavaScriptで現在位置を示すナビゲーションまでの実装をステップごとに解説したチュートリアルを紹介します。

現在位置を示すナビゲーションのキャプチャ

how to switch the on state of navigation links for dynamic pages
最終形のデモ

チュートリアルのステップは、下記のようになっています。

  1. Example 1
    ナビゲーションをリスト要素で実装。
  2. Example 2
    スタイルシートで装飾。
  3. Example 3
    スタイルシートで現在位置を実装。
  4. Example 4
    onclickを使用して選択箇所を実装。
  5. Example 5
    クリック時の不具合に対応。
  6. Example 6
    最終形、現在位置を示すナビゲーション。
  7. Example 7
    Example 6を使用して、パネルを切り替え。
  8. Example 8
    jQueryを使用して、パネルを切り替え。

sponsors

top of page

©2018 coliss