FreeStyle Menus Demonstration

This script is a highly flexible means of converting HTML content into powerful popup menus, using either nested lists or DIV tags for menu data, and following best practice guidelines for powerful and accessible menus.

CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」。
ブラウザ上で動くWindowsのメニュー風のUIは結構見かけますが、アニメーションするものはあまり見かけませんね。
フェードアウトしてくれる点やなめらかな動作がなんともクールです。



作成時のHTMLは次のような<ul><li>要素を作るのみなのでHTML的にクリーンに作れます。

<ul class="menulist" id="listMenuRoot">
 <li><a href="#">Home</a></li>
</ul>

あとは、CSSでデザインし、JavaScriptを読み込んで id="listMenuRoot" のものとメニューを関連付ける処理を行います。
ライセンスは完全フリーではなく、http://www.twinhelix.com/ に対してリンクするか、カンパするかどちらかが必要のようです。

関連エントリ

• CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』