ドロップダウンとは、メニュー項目をクリックすると隠れたサブメニューが表示されるインターフェースコンポーネントです。通常、ドロップダウンメニューはナビゲーションバーに使用されます。
jQueryを使うと、少ないコードでドロップダウンメニューの表示・非表示を簡単に制御できます。例えば、.slideDown()メソッドでサブメニューを表示し、.slideUp()メソッドで非表示にします。
イベントリスナーを設定することで、ユーザーがメニュー項目をクリックした時にアニメーションを付けてサブメニューを開閉できます。これにより、ユーザーフレンドリーなインターフェースが実現できます。
ドロップダウンのコード
それぞれの親メニューを、ホバーすると、サブメニューがドロップダウンします。slideDown(200)、slideUp(200)の数値は変更できます。
See the Pen jQuery、ドロップダウン1 by sho-ta (@sho-ta) on CodePen.
下記のコードはデザインを変更しました。黒を中心とした色合いで、メニューの横に印をつけました。枠線も足しています。アニメーションは変わりません。
See the Pen jQuery、ドロップダウン2 by sho-ta (@sho-ta) on CodePen.
このコードは、Q&Aです。クリックすると対応するスライドパネルが表示・非表示になり、三角形アイコンが3D回転するアコーディオンメニューを実現しています。
See the Pen jQuery、ドロップダウン3 by sho-ta (@sho-ta) on CodePen.
こちらも先程のコードと、形式的には似ております。違う点は要素をクリックして開閉された時、他の要素が閉じます。先程のQ&Aはクリックしても他の要素は見えたままです。用途に応じて使い分けが出来ます。
See the Pen jQuery、ドロップダウン4 by sho-ta (@sho-ta) on CodePen.
こちらはヘッダーとサイドメニューを含むウェブサイトのレイアウトを示しています。ヘッダーにはロゴとナビゲーションがあり、メニュー項目はクリックするとサブメニューがスライドして表示されます。親メニューのクリックで他のサブメニューが閉じられます。デザインはシンプルで使いやすいものです。
See the Pen jQuery、ドロップダウン5 by sho-ta (@sho-ta) on CodePen.
以上です。コードはコピペ、修正、追記してご利用頂いて構いません。
コメント