更新日:2015.05.27jQueryjQueryのアコーディオンメニューを4つの工程でパッと実装する方法TwitterFacebookはてブPocketLINEアコーディオンメニューは楽勝で作れます!今回はjQueryを使って実戦向きなアコーディオンメニュー紹介します。「jQueryって難しいんでしょ?」と聞かれますが、ルールを守ればそんなに難しくありません。30分もあればできる!!!それに今回のアコーディオンメニューは初心者向きだと思います。30分もあれば出来ちゃうしね...それでは早速作りましょう!jQueryアコーディオンのサンプルはこちら1.jQueryの「hoverAccordion」プラグインをダウンロードhoverAccordionZIPファイルを解凍すると2つのフォルダと2つのHTMLファイルがあります。今回使用するのは「js」フォルダ内の「jquery.hoveraccordion.js」と「img」フォルダ内の「ha-down.gif」と「ha-up.gif」だけです。2.JavaScpiptの外部ファイルを追加HTMLの<head>内にjQueryのライブラリとJavaScpiptの外部ファイルを追加します。id=”accordionmenu”>タグを追加します。<li>タグにメニューの項目を宣言します。メニュー項目は<a>・・・</a>タグで囲ってリンク形式にします。href="#">メニュー5</a></li></ul>サブメニューの場合はメニューの<li>・・・</li>の間<ul><li>タグを挿入して宣言します。</ul></li>4.JavaScriptを追加<head>内にJavaScriptを追加します。</script>これでアコーディオンメニューは完成です!!!ねっ簡単でしょ。jQueryアコーディオンのサンプルはこちらえっ!まだこんな感じで全然デザインされてないじゃんとブーイングが聞こえそうですが....一応、jQueryの実装は終わりました。メニュー2の所にカーソルを合わせるとピロッとサブメニューが出てくるはずです。このアコーディオンメニューはこれからが本番でーす!!そうCSSでデザインするんです!!!少し長いですが、CSSでデザインしていきましょ。15px;}//矢印に設定//矢印のイメージは「images」フォルダに格納されている設定なので、自分のフォルダに合わせて下さい。url(images/ha-up.gif);}これで本当に完成!jQueryアコーディオンのサンプルはこちらまとめいかがだったでしょうか。jQuery自体の設定は本当に簡単に出来たと思います。CSSの知識はちょっと必要になりますが初心者の方でも十分出来ると思います。今回はグレー系で制作しましたが、レッド系でもブルー系でも全然行けると思うのでオリジナルデザインに挑戦してみて下さい。このアコーディオンメニューが多くの人に役立てば幸いです。