[CSS]水平型の多階層ナビゲーションのアイテムをさまざまなアニメーションで表示するスタイルシート

あちこちでお目にかかる水平型の多階層ナビゲーションで、子階層を表示する時のアニメーションのさまざまなバリエーションを紹介します。

通常時の見た目は同じですが、一手間加えてあると「おっ！」ってなりますよね。

Animated Navigation Examples

ベースのHTMLは、非常にシンプルです。

HTML

ナビゲーションの各アイテムはリストで実装し、nav要素で内包します。

<nav class="nav">
  <ul>
    <li>
    <a href="#">Nav Item</a>
      <ul>
        <li><a href="#">Subnav Item</a></li>
        <li><a href="#">Subnav Item</a></li>
        <li><a href="#">Subnav Item</a></li>
      </ul>
    </li>
    <li>
    ...
    ...
  </ul>
</nav>

CSSは全部紹介すると長くなるので、デモページでご確認ください。
下記にデモの動きをGIFアニメーションにしてみました。

Not Animation: アニメーション無しのシンプル版

Fade In and Out: フェードイン・アウトで表示します。

Slide Down #1: 各アイテムが重なるようにスライドします。

Slide Down #2: アイテムがいっぺんにスライドします。

Fold Out: 裏からぱたっと表示します。