Articles

カスタムマルチ選択ドロップダウンを作成する方法

HTML では、select 要素の multiple 属性を使用して複数のアイテムを選択できるセレクトボックスを作成するネイティブな方法がありますが、このレンダリングはあまりコンパクトでもきれいでもなく、セレクトボックス内のオプションでできるスタイルもあまり多くありません。私が探しているスタイルに合うカスタム・デザインは見つからなかったので、結局自分で作ることにした。完全なコードは、一致する検索バーとともに私の GitHub で利用可能です。

これは、通常の選択の動作とスタイルを変更することが困難なため、ゼロから構築されています。セレクトの通常表示される部分は、単純なボタンです。ドロップダウンメニューは、Bootstrap ユーティリティクラスの d-none によって隠された div で、Bootstrap ユーティリティクラスの shadow と rounded によって丸みと影が適用されています。オプションは、ラベル付きのシンプルなチェックボックスです。一致する単一のセレクトボックスが必要な場合は、これらをラジオボタンに置き換えることができます。

以下は、ボタンとメニューの最終的な HTML です。

<div> <button onclick="dropDown(event);" class="menu-btn" type="button"> Menu 1 &#9013; </button> <div class="d-none shadow rounded menu"> <span class="d-block menu-option"><label><input type="checkbox">&nbsp; Option 1</label></span> <span class="d-block menu-option"><label><input type="checkbox">&nbsp; Option 2</label></span> <span class="d-block menu-option"><label><input type="checkbox">&nbsp; Option 3</label></span> </div></div>

Enter fullscreen mode Exit fullscreen mode

私はメニューボタンを丸くしてかなり小さくしたかったので、それに合わせてスタイルしました（もちろんどのようにスタイルしてもよく、機能にまったく影響を与えません）。

.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}

Enter fullscreen mode Exit fullscreen mode

For the menu itself, I added a little padding so that text was running up against the top of the menu and some margin so it didn’t overlap with the button (both completely optional).。また、高い z-index (他のものの上に表示されるように)、背景色 (デフォルトは透明ですが、このコンテキストでは馬鹿らしく見えます)、および絶対位置 (page.

.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}

Enter fullscreen mode Exit fullscreen mode

メニューオプションについて、それらを分けるために小さなパディングを追加しました。

.menu-option { padding: 6px 20px 6px;}

Enter fullscreen mode Exit fullscreen mode

Dropdown メニューの外側をクリックすると、通常のセレクトボックスのように解除されるように、そのクリックを検出する方法が必要です。私は、メニューよりも低いz-indexで画面全体をカバーするdivを作成することによって、これを実現しました。これにより、メニューの外側のクリックをすべて検出することができます

<div class="d-none" onclick="hide(event)"></div>

Enter fullscreen mode Exit fullscreen mode

#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}

Enter fullscreen mode Exit fullscreen mode

これが実際に動くには、メニューとオーバーレイを表示、消滅するJavaScript関数が必要です。
この関数は、メニューとオーバーレイから d-none クラスを削除し、それらをアクティブにします。 IDを介してこれを処理するのではなく、単にターゲット（ボタン）の親の2番目の要素を取り、それがメニューであると仮定します。

function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}

Enter fullscreen mode Exit fullscreen mode

This function adds the d-none class to the overlay and all elements with the class menu, hidden them.

function hide(event) { var items = document.getElementsByClassName('menu'); for (let i = 0; i < items.length; i++) { items.classList.add("d-none"); } document.getElementById("overlay").classList.add("d-none");}

Enter fullscreen mode Exit fullscreen mode

If you found this useful, you might also like my matching search bar design.

コメントを残すコメントをキャンセル