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="#dots-vertical"></use></svg>
        <span class="sr-only">Åbner overflow menu</span>
    </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 tab-tasten 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