「クリックで折りたためるアコーディオンメニュー」を作成してみた

こんにちは!ココです。

今日は「現場でかならず使われているjQueryデザインメソッド」という本で紹介されているものの中の一部から、アコーディオンメニューを作ってみました。

jQuery
メインメニューをクリックすると、サブメニューが開くアコーディオンメニューです。
メインメニューをもう一度クリックすると折りたたむことができ、開閉の動きはスライドアニメーションになっています。
カテゴリーごとに整理されているため見やすく、スペースもコンパクトに収めることができるメニューです。


メインメニューごとに色分けされています。
サブメニューはマウスオーバーでデザインが変わるので、視覚的にもわかりやすく設定されています。

汎用性が高そうなデザインですね。
メインメニューをクリックしたときに、サブメニューの左上に表示されている「▲」は画像ですので、他のデザインにしたりしても面白そうです。

メインメニューの各項目の横に、アイコンを表示させて、視認性をあげるのもいいかもしれませんね。
今後活用していきたいと思います。



同じカテゴリー(Web)の記事

上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

写真一覧をみる

削除
「クリックで折りたためるアコーディオンメニュー」を作成してみた
    コメント(0)