Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Overflow menu
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="overflow-menu overflow-menu--open-right ">
<button class="button-overflow-menu js-dropdown "
data-js-target="overflow1" aria-haspopup="true"
aria-expanded="false">
Overflow menu
<svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#more-vert"></use></svg>
</button>
<div class="overflow-menu-inner" id="overflow1" aria-hidden="true">
<ul class='overflow-list'>
<li><button>Option 1</button></li>
<li><button>Option 2</button></li>
<li><a href='#'>Option 3 as link</a></li>
<li><button>Option 4 is longer text</button></li>
</ul>
</div>
</div>
Tilgængelighed
Overflow menu skal kunne aktiveres og håndteres fra tastatur.
Overflow menu skjuler indhold for brugeren og bør anvendes i begrænset omfang.
Overflow menu skal kunne aktiveres og håndteres fra tastatur og brugeren skal kunne anvende tastaturet til navigation.
Klasser
Følgende aria tags styrer hvorvidt menuen er foldet ud:
- Button:
aria-expanded="false"
- Overflow menu:
aria-hidden="true"
Følgende klasser styrer i hvilken retning menuen skal folde ud:
- Venstre:
.overflow-menu--open-left
- Højre:
.overflow-menu--open-right
Der er lavet et specifikt liste element til overflow-menuen (se .overflow-list
) som kan indeholde links eller buttons. Det er dog ikke nødvendigt at benytte denne liste. Overflow-menuen er bare en container hvor man kan placere det indhold man nu har lyst til.
Skjul/vis
Initialiser collapse/expand javascript med at placere følgende på button elementet: class="js-dropdown" data-js-target="#overflow1"
Elementet som skal collapses/expandes skal have et matchende id id="overflow1"
(placeres på .overflow-menu-inner
)
JavaScript
Collapse komponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med nedenstående:
new DKFDS.Dropdown(document.getElementById('OVERFLOW-BUTTON-ID'));
Events
Event key | Element | Beskrivelse |
---|---|---|
fds.dropdown.open | button.js-dropdown |
Når en overflow menu bliver foldet ud, bliver eventet fds.dropdown.open udløst på knappen |
fds.dropdown.close | button.js-dropdown |
Når en overflow menu bliver foldet ind, bliver eventet fds.dropdown.close udløst på knappe |
Varianter
Sortering
<div class="overflow-menu overflow-menu--sort overflow-menu--open-right"
id="trash-sorting-overflowmenu">
<button class="button-overflow-menu"
data-js-target="trash-sorting-overflowmenu-panel"
aria-haspopup="true" aria-expanded="false">
<svg class="icon-svg" aria-hidden="true" focusable="false"><use xlink:href="#sort-default"></use></svg>Sortér:<span
class="selected-value"></span>
</button>
<div class="overflow-menu-inner" id="trash-sorting-overflowmenu-panel"
aria-hidden="true">
<ul class='overflow-list' role="menu">
<li role="menuitem" aria-selected="true"><button
id="newfirst">Nyeste først</button></li>
<li role="menuitem"><button id="oldfirst">Ældste først</button>
</li>
<li role="menuitem"><button id="affaldstype-asc">Affaldstype
(A-Å)</button></li>
<li role="menuitem"><button id="affaldstype-desc">Affaldstype
(Å-A)</button></li>
</ul>
</div>
</div>
JavaScript
Overflow menu med sorteringsfunktion kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med nedenstående:
new DKFDS.DropdownSort(document.getElementById('OVERFLOW-BUTTON-ID'));
Events
Event key | Element | Beskrivelse |
---|---|---|
fds.dropdown.open | button.js-dropdown |
Når en overflow menu bliver foldet ud, bliver eventet fds.dropdown.open udløst på knappen |
fds.dropdown.close | button.js-dropdown |
Når en overflow menu bliver foldet ind, bliver eventet fds.dropdown.close udløst på knappe |
fds.dropdown.selected | button.js-dropdown |
Når en værdi bliver valgt |