[CSS]シンプルなHTMLで実装するダイナミックなサイトマップコンテンツ

シンプルなHTMLを使いつつ、大胆なレイアウトとダイナミックなアニメーションを伴ったサイトマップを実装するスタイルシートを紹介します。

CSSsitemap System

[ad#ad-2]

デモはCSS3に対応したFirefox4, Chrome, Safariなどでご覧ください。

デモページ

各ラベルをホバーすると、パネルがアニメーションでスライドします。

デモページ

HTMLは非常にシンプルで、リスト要素を使用します。

HTML

<ul>
  <li><span>Fruit</span>
    <ul>
      <li><span>Apples</span></li>
      <li><span>Oranges</span></li>
      <li><span>Watermelons</span></li>
    </ul>
  </li><!-- Fruit -->
 
  <li><span>Vegetables</span>
    <ul>
      <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span>
        <ul>
          <li><span>Arugula</span></li>
          <li><span>Cabbage</span></li>
          <li><span>Lettuce</span></li>
          <li><span>Spinach</span></li>
        </ul>
      </li><!-- Leaf Vegetables -->
 
      <li><span>Root Vegetables</span>
      	<ul>
          <li><span>Beets</span></li>
          <li><span>Carrots</span></li>
        </ul>
      </li><!-- Root Vegetables -->
    </ul>
  </li><!-- Vegetables -->
</ul>

「CSSsitemap System」はCSSやJavaScriptファイルを含む一式がダウンロードでき、そのままラベルを変更するだけで利用できます。

[ad#ad-2]