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

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

apple style menuのキャプチャ

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

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

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

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

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

sponsors

top of page

©2018 coliss