CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」
2006年10月04日-
スポンサード リンク
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/ に対してリンクするか、カンパするかどちらかが必要のようです。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- ほぼCSSで実装されたUIフレームワーク「Ellegant CSS」
- TailwindCSSベースの150種類以上のUIライブラリ「SailboatUI」
- 1700種類以上のSVGアイコン「MingCute Icon」
- 2000種類以上の汎用ピクトグラムアイコン集「Atlas Icons」
- かわいい手書き風フォント「うさぎとまんげつのサンセリフ」
- 過去のエントリ