[CSS]リスト要素で実装したサイトマップを美しくスタイルする -SlickMap CSS

実用的で美しいサイトマップを実装するスタイルシートをAstuteoから紹介します。

デモのキャプチャ

SlickMap CSS
demo

サイトマップの階層はレベル3まで用意されており、リスト要素でシンプルに実装されています。

スタイルシートのオフ時のキャプチャ

スタイルシートのオフ時

SlickMap CSSの使い方

添付の「README.txt」より、SlickMap CSSの簡単な使い方です。

  1. ul要素で実装し、各ラベルには必ずa要素を含めます。
    フォーマットはデモまたはダウンロードのファイルを確認してください。
  2. スタイルシートのmediaには「screen, print」を指定しています。
  3. サイトマップの一番上に配置されるサイトのトップページへのリンクは、リストの一番上に記述し、idを「#home」にします。
  4. カラムの幅を変えるには、「slickmap.css」内の「#primaryNav li」のwidth指定を変更します。
  5. ファイルの設置場所に合わせて、画像のパスなどは変更してください。

top of page

©2017 coliss