アコーディオン型メニューを作るには、jQuery UI の Accordion が便利だ。
-
jQuery UI の Accordion プラグインによるアコーディオンメニュー
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを作る方法。2階層の上下開閉式アコーディオン型パネルとして、トップページで使うのも良いかも。jQuery だけでも作れるが、jQuery UI の Accordion プラグインを使うと、さらに簡単。
-
jQuery UI の Accordion プラグインによるアコーディオンメニュー [2]
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。マウスのカーソルを合わせると開閉するタイプ。2階層の上下開閉式アコーディオン型パネルとして、トップページで使うのも良いかもしれない。
-
jQuery UI の Accordion プラグインによるアコーディオンメニュー [3]
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。メニューボックスの大きさを変更できるタイプ。メニューボックスの最小サイズを指定しておくこともできる。
-
jQuery UI の Accordion プラグインによるアコーディオンメニュー [4]
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。フォルダのアイコン画像を使用したタイプ。開いているメニューのアイコンは、開いた状態のフォルダ・アイコンを表示。閉じているメニューのアイコンは、閉じた状態のフォルダ・アイコンを表示。
-
jQuery UI の Accordion プラグインによるアコーディオンメニュー [5]
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。プラス「＋」とマイナス「－」のアイコン画像を使用したタイプ。開いているメニューのアイコンは、マイナス「－」アイコンを表示。閉じているメニューのアイコンは、プラス「＋」アイコンを表示。
-
jQuery UI の Accordion プラグインによるアコーディオンメニュー [6]
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。jQuery UI の CSS テーマに、「sunny」を採用したタイプ。さらに、accordion() のオプションも、複数指定。
-
順番を入れ替えられるアコーディオンメニュー
jQuery UI の Accordion プラグインで、2階層の上下開閉式アコーディオン型メニューを簡単に作る方法。ドラッグ＆ドロップで、メニューの順番を入れ替えられるタイプ。順番の入れ替えには、jQuery UI の Sortable プラグインを使っている。