[CSS]水平型の多階層ナビゲーションのアイテムをさまざまなアニメーションで表示するスタイルシート
Post on:2014年4月3日
あちこちでお目にかかる水平型の多階層ナビゲーションで、子階層を表示する時のアニメーションのさまざまなバリエーションを紹介します。
通常時の見た目は同じですが、一手間加えてあると「おっ!」ってなりますよね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014040304.png)
ベースの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アニメーションにしてみました。
![デモのアニメーション](/wp-content/uploads-201402/2014040303-01.gif)
Not Animation: アニメーション無しのシンプル版
![デモのアニメーション](/wp-content/uploads-201402/2014040303-02.gif)
Fade In and Out: フェードイン・アウトで表示します。
![デモのアニメーション](/wp-content/uploads-201402/2014040303-03.gif)
Slide Down #1: 各アイテムが重なるようにスライドします。
![デモのアニメーション](/wp-content/uploads-201402/2014040303-04.gif)
Slide Down #2: アイテムがいっぺんにスライドします。
![デモのアニメーション](/wp-content/uploads-201402/2014040303-05.gif)
Fold Out: 裏からぱたっと表示します。
sponsors