Dropdown Menu

Potřebujete lidem nabídnout doplňující akce, které by ale v uživatelském rozhraní zabíraly příliš mnoho místa? Zkuste pak využít tento prvek.

Dropdown, nebo dá se říct také Menu, se využívá pro další možnosti, například v případě kontextových menu. V rozhraní jsou vidět primární akce a ty méně důležité jsou “schované” v ramci menu.

Poznámka – lidé někdy používání název Dropdown pro trochu jiný element – Select box – který je určený pro výběr položek, například ve formuláři.

Jak vypadá

  • Dropdown často vypadá jako Select box, tedy tlačítko s možností další nabídky
  • Hodnotou Dropdown je typicky popisek akcí, které jsou v rámci menu.
Kontextové menu s využitím Dropdown elementu
Kontextové menu s využitím Dropdown elementu

Dropdown, který se také často nazývá jako Menu, může sloužit právě jako nabídka dalších možností. Třeba u položek v seznamu, kdy se nabídka zobrazí po kliknutí na 3 tečky.

Příklad menu s využitím Dropdown
Příklad menu s využitím Dropdown

Stavy

Dropdown mnohdy vypadá podobně jako Select box, ale funguje trochu jinak – pokud vyberete určitou možnost, hodnota neni vybraná jako hodnota Dropdownu, ale je provedena vybraná akce.

Dropdown je zavřený
Dropdown je zavřený
Najetí myši na dropdown
Najetí myši na dropdown

Když kliknete na Dropdown, tak se poté rozbalí dostupné možnosti:

Seznam možností
Seznam možností
Najetí myši na jednu z možností
Najetí myši na jednu z možností

Na rozdíl od Select boxu nebude daná hodnota vybrána jako hodnota Dropdownu, ale provede se daná akce, například se otevře modální dialog, nová stránka, atd.

Menu lze typicky zavřít opětovným kliknutím na dropdown, případně kliknutím mimo seznam kamkoliv na obrazovce.

Skupiny

Pro snazší orientaci v možnostech je vhodné je rozdělit do skupin podle jejich významu nebo například podobnosti. Můžete pak díky tomu lidem usnadnit orientaci nebo jejich výběr.

Rozdělení možností do jednotlivých skupin
Rozdělení možností do jednotlivých skupin

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *