前の記事 ≪:CSSでクールなタブUIを作成するサンプル
次の記事 ≫:フォームのtextareaをより使いやすくすることが出来る「Textarea tools」

CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」

2006年10月04日-はてなブックマーク

スポンサード リンク

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/ に対してリンクするか、カンパするかどちらかが必要のようです。

関連エントリ

関連の記事検索:JavaScript, CSS, デザイン, Webデザイン, UI, Web制作
スポンサード リンク

By.KJ : 2006年10月04日 07:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)