ドロップダウンは、クリックやホバーなどのユーザーアクションによって、隠れているメニュー項目やオプションを表示するインターフェース要素です。
例えば、ウェブサイトのナビゲーションバーにあるメインメニュー項目をクリックすると、その下にサブメニューが展開されます。これにより、限られたスペースに多くのリンクやオプションを収めることができます。
ドロップダウンメニューは、ナビゲーションメニュー、フォームの選択肢、フィルターオプションなど、ユーザーが複数の選択肢から一つを選ぶ必要がある場面でよく使用されます。例えば、ショッピングサイトでカテゴリ別に商品を表示する際や、設定ページでユーザーがオプションを選択する際に便利です。JavaScriptを使うことで、動的なインタラクションやアニメーションを追加し、ユーザーエクスペリエンスを向上させることができます。
いろんなドロップダウンのコード
ドロップダウン1、ホバー時にドロップダウン
ドロップダウンメニューが出来ました。次のコードで少し丸みと動きも滑らかにします。
See the Pen javascrit、ドロップダウンを作成する1 by sho-ta (@sho-ta) on CodePen.
よりモダンで視覚的に魅力的なドロップダウンメニューにしました。
See the Pen ドロップダウン by sho-ta (@sho-ta) on CodePen.
メニューを4つに増やしました。
See the Pen javascrit、ドロップダウンを作成する3 by sho-ta (@sho-ta) on CodePen.
色合いをダークにポイントの色を水色にしました。このJavaScriptコードは、複数のドロップダウンメニューをボタンクリックで制御します。各メニューの表示切替と外側のクリックによる自動閉じ機能があり、ユーザーエクスペリエンスを向上させます。
See the Pen javascrit、ドロップダウンを作成する4 by sho-ta (@sho-ta) on CodePen.
ドロップダウン2、クリック時にドロップダウン
このJavaScriptコードは、3つのドロップダウンメニューを個別にボタンクリックで操作可能にし、クリックで自動的に閉じる機能を提供します。ユーザーがメニュー内部をクリックした際には閉じないように設定されています。メニューは真横に出現するようにレイアウトしています。
See the Pen javascrit、ドロップダウンを作成する5 by sho-ta (@sho-ta) on CodePen.
こちらのコードはメニューの中に、ドロップダウンが出現します。親メニュー、例えばニュースをクリックすると出現したり、消えたりします。
See the Pen javascrit、ドロップダウンを作成する6 by sho-ta (@sho-ta) on CodePen.
サブメニューの要素にアニメーションを追加しました。
See the Pen javascrit、ドロップダウンを作成する7 by sho-ta (@sho-ta) on CodePen.
コメント