これまで、メニューの実装などに便利な、
トグルの基本的な実装方法を紹介してきました。
ここでは、これをさらにカスタマイズして、
「MENU」ボタンクリックで上からメニューが降りてくる２列トグルメニューを実装する方法をご紹介します。
jQueryプログラムを読み込む
以下のページの「【STEP1】jQueryライブラリの読み込み」手順に沿って、
jQueryファイルの読み込みを行います。
htmlでトグルメニューを記述する
htmlは以下のような内容になります。
HTML
ここでのポイントは、トグルボタンである「dt」とトグルで表示・非表示を切り替えたい「dd」の両方にIDを付与するということです。
jQueryプログラムを記述する
実際にトグルで表示を切り替えるため、jQueryプログラムを記述していきます。
先ほどHTMLプログラムで設定したIDを指定して、トグルアクションを設定しましょう。
jQuery
CSSを記述する
メニューデザイン用のcssを記述します。
基本は、関連記事で紹介している１列トグルメニューのcssと同じですが、さらに以下の内容を追記してください。
CSS
関連記事
ここでは、２列のトグルメニューの作り方を紹介してきました。
１列、３列のトグルメニューを作りたい方は、以下のページも参考にしてみてください。
