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