Apple風デザインのアコーディオン型ナビゲーションのチュートリアル

kriesi.atのエントリーから、Apple風にデザインされたアコーディオン型ナビゲーションの画像作成からスタイルシート・スクリプト実装までのチュートリアルを紹介します。

Create an apple style menu and improve it via jQuery
デモ

上記ページでは、Apple風にデザインされたナビゲーション画像のPhotoshopでの作成方法から、HTML+CSS、JavaScriptの実装方法まで詳細なチュートリアルが掲載されています。

ナビゲーションは、リスト要素でマークアップされています。

<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>

アコーディオンのエフェクトには、jQueryとKwicks for jQueryが使用されており、スムーズな動作でアイコンが表示されます。

ダウンロードできるファイルには、HTML・CSS・JSファイルや画像をはじめ、PSDファイルもあるのでデザインの変更やテキストの変更なども可能です。

Post on:2008年7月30日