Kode

Venstremenu

Eksempler og retningslinjer

Installation

HTML Struktur

<nav>
    <ul class="sidenav-list" role="menu">
        <li role="none">
            <a href="#" role="menuitem">
                Hovedside
            </a>

        </li>
        <li class="current  " role="none">
            <a href="#" role="menuitem" aria-current="true">
                Hovedside
            </a>
            <ul class="sidenav-sub_list" role="menu">
                <li role="none">
                    <a href="#" role="menuitem">
                        Underside
                    </a>

                </li>
                <li class=" active " role="none">
                    <a href="#" role="menuitem" aria-current="page">
                        Underside
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Underside
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Underside
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Underside
                    </a>

                </li>
            </ul>

        </li>
        <li role="none">
            <a href="#" role="menuitem">
                Hovedside
            </a>

        </li>
    </ul>
</nav>

Aktive menupunkter

Aktive menupunkter skal have klassen current.
Kun det sidste aktive menupunkt skal have klassen active.
Hvis der kun er ét aktivt niveau sættes begge klasser.

Anchor links

Hvis en undermenu består af links til områder på den aktuelle side tilføjes klassen has-anchor-links på <ul> elementet.

Vis dette eksempel i et nyt vindue

<nav>
    <ul class="sidenav-list" role="menu">
        <li role="none">
            <a href="#" role="menuitem">
                Hovedside
            </a>

        </li>
        <li class="current  active  has-anchor-links" role="none">
            <a href="#" role="menuitem" aria-current="true"
                aria-current="page">
                Hovedside
            </a>
            <ul class="sidenav-sub_list" role="menu">
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
            </ul>
            <ul class="sidenav-sub_list" role="menu">
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
                <li role="none">
                    <a href="#" role="menuitem">
                        Anchor link
                    </a>

                </li>
            </ul>
        </li>
    </ul>
</nav>

Tilføj ikon og information i venstremenu

For at tilføje et ikon til et punkt i venstremenuen bruges klassen sidenav-icon-before.
For at tilføje information til et punkt i venstremenuen bruges klassen sidenav-information.
Ikoner og informationer kan også sammensættes i én venstremenu.