これまで、メニューの実装などに便利な、
トグルの基本的な実装方法を紹介してきました。

 

ここでは、これをさらにカスタマイズして、

「MENU」ボタンクリックで上からメニューが降りてくる2列トグルメニューを実装する方法をご紹介します。

 

jQueryプログラムを読み込む

以下のページの「【STEP1】jQueryライブラリの読み込み」手順に沿って、

jQueryファイルの読み込みを行います。

 

 

htmlでトグルメニューを記述する

htmlは以下のような内容になります。

 

HTML

 

ここでのポイントは、トグルボタンである「dt」とトグルで表示・非表示を切り替えたい「dd」の両方にIDを付与するということです。

 

jQueryプログラムを記述する

実際にトグルで表示を切り替えるため、jQueryプログラムを記述していきます。
先ほどHTMLプログラムで設定したIDを指定して、トグルアクションを設定しましょう。

 

jQuery

 

CSSを記述する

メニューデザイン用のcssを記述します。

基本は、関連記事で紹介している1列トグルメニューのcssと同じですが、さらに以下の内容を追記してください。

 

CSS

 

関連記事

ここでは、2列のトグルメニューの作り方を紹介してきました。
1列、3列のトグルメニューを作りたい方は、以下のページも参考にしてみてください。

 

 

 

おすすめの記事