HTML nabízí nativní způsob vytvoření pole výběru, které podporuje výběr více položek pomocí atributu multiple u prvků výběru, ale jeho vykreslení není příliš kompaktní ani hezké a s možnostmi v poli výběru toho také nelze moc dělat. Nemohl jsem najít žádné vlastní návrhy, které by odpovídaly stylu, který jsem hledal, takže jsem nakonec vytvořil vlastní. Celý kód je k dispozici na mém GitHubu zde spolu s odpovídajícím vyhledávacím panelem.
Tento je vytvořen od nuly kvůli obtížím při změně chování a stylu běžného výběru. Normálně viditelná část selectu je jednoduché tlačítko. Rozbalovací nabídka je div skrytý pomocí užitkové třídy Bootstrap d-none, přičemž zaoblení a stínování je aplikováno pomocí užitkových tříd Bootstrap shadow a rounded. Volby jsou jednoduchá zaškrtávací políčka s popisky. Ty by mohly být nahrazeny radiovými tlačítky, pokud byste chtěli odpovídající jedno výběrové pole.
Tady je finální HTML pro tlačítko a nabídku
<div> <button onclick="dropDown(event);" class="menu-btn" type="button"> Menu 1 ⌵ </button> <div class="d-none shadow rounded menu"> <span class="d-block menu-option"><label><input type="checkbox"> Option 1</label></span> <span class="d-block menu-option"><label><input type="checkbox"> Option 2</label></span> <span class="d-block menu-option"><label><input type="checkbox"> Option 3</label></span> </div></div>Chtěl jsem, aby tlačítko nabídky bylo zaoblené a poměrně malé, takže jsem ho podle toho nastyloval (můžete ho samozřejmě nastylovat jakkoli, na funkci to nemá žádný vliv):
.menu-btn { border-radius: 48px; border: 0.5px solid lightgrey; font-size: 0.9em; padding: 2px 10px; background-color: white;}Pro samotnou nabídku jsem přidal trochu výplně, aby text neběžel proti horní části nabídky, a nějaký okraj, aby se nepřekrýval s tlačítkem (obojí zcela volitelné). Také jsem přidal vysoký z-index (aby se zobrazovalo přes ostatní věci), barvu pozadí (výchozí je průhledná, což v tomto kontextu vypadá hloupě) a nastavil pozici na absolutní, aby netlačilo ostatní věci dolů po stránce.
.menu { padding-top: 10px; z-index: 200; margin-top: 4px; background-color: white; position: absolute;}Pro možnosti menu jsem přidal trochu paddingu, aby byly odděleny.
.menu-option { padding: 6px 20px 6px;}Potřebujeme způsob, jak zjistit kliknutí mimo rozbalovací nabídku, aby ji bylo možné ukončit kliknutím mimo ni jako normální výběrové pole. Udělal jsem to tak, že jsem vytvořil div, který pokrývá celou obrazovku s nižším z-indexem než nabídka. To nám umožní detekovat všechna kliknutí mimo nabídku
<div class="d-none" onclick="hide(event)"></div>#overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 100;}Aby to skutečně fungovalo, potřebujeme funkce JavaScriptu, aby se nabídky a překrytí objevovaly a mizely.
Tato funkce odstraní z nabídky a překryvu třídy d-none a aktivuje je. Místo toho, aby to řešila pomocí ID, jednoduše vezme druhý prvek rodiče cíle (tlačítka) a předpokládá, že je to menu. To je důvod, proč jsou menu a tlačítko zabaleny do jinak prázdného divu.
function dropDown(event) { event.target.parentElement.children.classList.remove("d-none"); document.getElementById("overlay").classList.remove("d-none");}Tato funkce přidá třídu d-none překryvnému prvku a všem prvkům s třídou menu a skryje je.
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");}Pokud se vám to zdálo užitečné, mohl by se vám také líbit můj odpovídající návrh vyhledávacího panelu.