Apple風デザインのアコーディオン型ナビゲーションのチュートリアル
Post on:2008年7月30日
sponsors
kriesi.atのエントリーから、Apple風にデザインされたアコーディオン型ナビゲーションの画像作成からスタイルシート・スクリプト実装までのチュートリアルを紹介します。
Create an apple style menu and improve it via jQuery
デモ
上記ページでは、Apple風にデザインされたナビゲーション画像のPhotoshopでの作成方法から、HTML+CSS、JavaScriptの実装方法まで詳細なチュートリアルが掲載されています。
ナビゲーションは、リスト要素でマークアップされています。
|
1 2 3 4 5 6 7 8 |
<textarea name="code" class="html" cols="60" rows="5"> <ul class="kwicks"> <li id="kwick1"><a href="#">Home</a></li> <li id="kwick2"><a href="#">Contact</a></li> <li id="kwick3"><a href="#">Downloads</a></li> <li id="kwick4"><a href="#">Search</a></li> </ul> </textarea> |
アコーディオンのエフェクトには、jQueryとKwicks for jQueryが使用されており、スムーズな動作でアイコンが表示されます。
ダウンロードできるファイルには、HTML・CSS・JSファイルや画像をはじめ、PSDファイルもあるのでデザインの変更やテキストの変更なども可能です。
sponsors
