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
Venstremenu
Eksempler og retningslinjer
Installation
HTML Struktur
Kodeeksempel
<nav>
<ul class="sidenav-list">
<li>
<a href="#">
<div>Hovedside</div>
</a>
</li>
<li class="current ">
<a href="#">
<div>Hovedside</div>
</a>
<ul class="sidenav-sub_list">
<li>
<a href="#">
<div>Underside</div>
</a>
</li>
<li class=" active ">
<a href="#" aria-current="page">
<div>Underside</div>
</a>
</li>
<li>
<a href="#">
<div>Underside</div>
</a>
</li>
<li>
<a href="#">
<div>Underside</div>
</a>
</li>
<li>
<a href="#">
<div>Underside</div>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<div>Hovedside</div>
</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.
Kodeeksempel
<nav>
<ul class="sidenav-list">
<li>
<a href="#">
<div>Hovedside</div>
</a>
</li>
<li class="current active has-anchor-links">
<a href="#" aria-current="page">
<div>Hovedside</div>
</a>
<ul class="sidenav-sub_list">
<li>
<a href="#">
<div>Anchor link</div>
</a>
</li>
<li>
<a href="#">
<div>Anchor link</div>
</a>
</li>
</ul>
<ul class="sidenav-sub_list">
<li>
<a href="#">
<div>Anchor link</div>
</a>
</li>
<li>
<a href="#">
<div>Anchor link</div>
</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.