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

 

 

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

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

 

jQueryプログラムを読み込む

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

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

 

 

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

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

リンクが付いている場合はリンクが優先されるのでトグルのアクションは起きません。

メニュー3のみトグル対応となっています。

 

HTML

 

jQueryプログラムを記述する

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

 

jQuery

 

CSSを記述する

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

 

これに加え、以下の3列トグル専用のCSSを記述してください。

 

CSS

 

関連記事

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

 

 

 

おすすめの記事