Kode

Overflow menu

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

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

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