ドロップダウンとは？
Webのドロップダウンメニューとは、ユーザーがクリックするかホバー（マウスを重ねる）すると表示される選択肢のリストを提供するインターフェース要素です。
このメニューは通常、ページのナビゲーションバーやフォームの入力フィールドに組み込まれており、限られたスペースで多くの選択肢を提供するために使用されます。
メリットデメリット
多くのサイトで取り入れられているこの「ドロップダウンメニュー」ですがメリットもありますがデメリットもあるかと思います。
メリット
1番最初に思いつくメリットは、多くの選択肢を一つのメニューにまとめることで、画面スペースを有効に使えますことかと思います。特に下層ページが多いコーポレートサイトなどには向いてますね。
また、同様の理由になりますが、情報が整理でき、ユーザーが必要な情報を見つけやすくなります。
必要な時だけメニューを表示できるので、画面をすっきりと保てますので、シンプルなサイトを目指すにはうってつけでしょう。
・スペースの節約
・整理整頓
・インターフェースのシンプル化
デメリット
よく言われているのが、サイトに不慣れな方やタッチデバイスでは操作が若干むずかしいとのことです。
また、タブレットやスマートフォンの場合は一度タップしないとメニューが展開されないので、PCよりもワンアクション多くなってしまいます。
その他の意見ですと、キーボードやスクリーンリーダーを使うユーザーには使いにくい場合があるみたいです。私はあまり聞きませんが、多少はあるみたいですねー。大手の病院のサイトなんかは特に。
最後に上げるデメリットは至ってシンプルなもので、導入するのが少し難しい、また、複雑なメニューの場合はページ読み込みの時間に影響が出る場合もあります。ドロップダウンメニューではJavaScriptを利用する場合があります、その際に他のスクリプトと干渉する可能性もあるので、設置する場合は必ず環境下でテストする必要があります。
・使いにくい場合がある
・アクセシビリティの問題
・パフォーマンスへの影響
以上が、ドロップダウンを設置するうえでのメリット・デメリットとなるかと思います。
ご自分のサイトで設置する場合は上記内容を考慮したうえで設置してみてください。
それでは実際に稼働するドロップメーニューのサンプルを用意いたしましたの御覧ください。
PCでのドロップダウン
See the Pen dropdownmenu by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
コンテンツA とコンテンツBがサブメニューになってます。
マウスを重ねると、サブメニューが展開されます。
PCとSPでのドロップダウン
See the Pen Untitled by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
SPの時はサブメニューが展開されます。
これでも良いのですが、常に展開されているとUI的にも良くないので、よくあるメニューアイコンかなにかをタップしてメニューが表示れる方が良いでしょう。
[JavaScript+]PCとSPでのドロップダウン
See the Pen dropdownmenu_PC+SP_JavaScript by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
スマホの時はメニューのアイコンが表示され、アイコンをタップするとメニューが展開されます。
この様にUIに気を配ることで、サイト自体も見やすいですし使いやすいですよね！
サブメニューにも対応
ちょっと仕様を変更して、SPの時もサブメニューも折りたたまれた状態のものを用意しました。
HTMLとCSSはそのままで、JavaScriptを書き換えて対応します。
See the Pen dropdownmenu_PC+SP_JavaScript-2 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
上記の様にコンテンツA（またはB）をタップすると、サブメニューが展開されるようになりました。
あとは、装飾としてコンテンツAの末尾に「 ▽ 」などのアイコンを配置して、サブメニューがタップすると展開されることがわかるようにすると良いでしょう。
追加修正
See the Pen dropdownmenu_PC+SP_JavaScript-2 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.
これくらいすると見やすくてサブメニューがあると分かりやすくなりますね。
ちなみにこちらはCSSにアイコンの+と-を追加する様に設定しております。
/*アイコンを+に変更*/
.dropbtn::after {
content: "+"; /* アイコンを+に変更 */
display: inline-block;
color: white; /* アイコンの色を設定 */
font-size: 16px; /* アイコンのサイズを設定 */
margin-left: 5px; /* 必要に応じて調整してください */
vertical-align: middle; /* アイコンを中央に揃える */
}
.open-icon::after {
content: "-";
}あとはスクリプトの方で+と-のアイコンが切り替わるようにコードを修正してます。
// +、-のアイコン切り替え
var dropbtn = document.querySelector('.dropbtn');
dropbtn.addEventListener('click', function() {
dropbtn.classList.toggle('open-icon'); // クリック時にクラスを切り替えるまとめ
今回はCSSとjavascriptを使って作るドロップダウンメニューを紹介しました。
サイトの下層ページへの遷移でお困りの方は検討してみてはいかがでしょうか？
UIがまとまっているとユーザーにも優しいので離脱率の減少にもつながるのでオススメです！
