カスタムマルチセレクトドロップダウンを作成する方法

HTMLは、選択された要素の複数の属性を持つ複数の項目を選択するのをサポートする選択ボックスを作成するためのネイティブの方法を提供しますが、このレンダリングは本当に非常にコンパクトではないか、きれいではありません.私は私が探していたスタイルに合ったカスタムデザインを見つけることができなかったので、私は自分自身を作ってしまった.完全なコードは、一致する検索バーと一緒に私のgithub hereで利用可能です.
これは、通常の選択の動作とスタイルを変更するの難しさのためにゼロから構築されています.selectの通常表示される部分は単純なボタンです.ドロップダウンメニューは、ブートストラップユーティリティクラスD Noneによって隠されたdivです.ブートストラップユーティリティクラスを介して適用される丸めとシャドウがシャドウと丸められています.オプションは、ラベル付きの単純なチェックボックスです.場合は、一致する1つの選択ボックスを希望する場合は、これらのラジオボタンで置き換えることができます.
ボタンとメニューの最終的な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>

私はメニューボタンを丸くして、かなり小さくしたかったので、私はそれに応じてスタイルを整えました(もちろん、あなたがもちろん望むことができるスタイルは、全く機能に影響を及ぼしません).

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

メニュー自体のために、私は少しのパディングを加えました.そして、それがボタン(完全にオプションの両方)と重なっていなかったように、テキストがメニューのトップと若干のマージンに対して上がっていなかったようにしました.私も高Z -インデックス(それが他のものの上に表示するように)、背景色(デフォルトでは、この文脈では愚かに見える)透明度を追加し、絶対的に位置を設定するので、それは他のものをページをプッシュしていません.

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

メニューオプションのために、私は彼らを分けるために少し詰め物を加えました.

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

ドロップダウンメニューの外部でクリックするときに、通常の選択ボックスのようにクリックすることによって解凍することができます.私は、メニューより低いZ -インデックスでスクリーン全体をカバーするDIVを作成することによってこれをしました.これは、メニューのすべてのクリックを検出することができます

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

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

これを実際に動作させるには、メニューとオーバーレイを表示して消すようにするJavaScript機能が必要です.
この関数は、メニューとオーバーレイからD - Noneクラスを取り除きます.IDを介してこれを処理するのではなく、単にターゲットのボタンの親の2番目の要素を取り、それをメニューと仮定します.これは、メニューとボタンが別の空の部門でラップされる理由です.

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

この関数は、D - Noneクラスをオーバーレイとクラスメニューのすべての要素に追加します.

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

あなたがこの役に立つとわかるならば、あなたは私のものも好きかもしれません.