Navigasjonsmeny

Generering av meny

Venstremenyen skrives ut av base_with_nav.html og bruker wagtailmenus for å generere menyen.

Menyen viser to nivåer med lenker: Alle toppnivå-artikler (alle artikler som ligger på nivået rett under startsiden), og alle artikler på nivået under som hører til den delen av artikkeltreet man har navigert seg inn i.

Startsiden selv inngår ikke i menyen.

Wagtailmenus har flere ulike template tags for å generere menyer, men vi har endt opp med å bruke kun children_menu:

main_menu

Denne genererer menyer ut fra hvilke sider man eksplisitt velger skal være med i menyen (via Wagtail admin > Settings > Main menu). Vi ønsker ikke å måtte legge til hver ny toppnivå-artikkel i navigasjonsmenyen, så denne er ikke så hensiktsmessig. Vi kan heller ikke legge til selve startsiden som menyside, for vi ønsker ikke at denne skal vises i menyen.

flat_menu

Denne brukes til statiske menyer (header, footer, etc.) og kan heller ikke brukes til dette formålet.

section_menu

Denne ser ut til å være tiltenkt brukt for å lage undermenyer for nettstedets hovedseksjoner (dvs. undermenyer for alle toppnivå- artikler). Ikke relevant for oss.

children_menu

Denne kan vise undersider av aktiv side eller en annen valgt side. Brukes foreløpig til å generere venstremenyen (ved å be om meny for nettstedets startside (site.root_page) i stedet for aktiv side). Kan også være aktuell for å lage en StreamBlock som setter inn lenker til undersider automatisk.

Wagtailmenus legger på noen CSS-klasser på enkelte av menyinnslagene:

• active: Siden som vises nå. Hvis siden ligger så dypt (på nivå 3 eller lenger nede) at den ikke vises i venstremenyen (fordi vi har begrenset denne til kun 2 nivåer), vil ingen av listeelementene i venstremenyen ha denne klassen.

• ancestor: Alle sider lenger oppe i hierariket.

Disse brukes for å fargelegge venstremenyen og for å ekspandere/skjule deler av menyen.

Visningslogikk

CSS-reglene er skrevet slik at menyen automatisk (dvs. uten bruk av javascript) lastes lukket på xs/sm/md, og åpen på lg/xl. Åpning/lukking av menyen skjer ved at en javascript onClick-event hektes på hamburgerikonet, og denne funksjonen toggler en ekstra CSS-klasse (klassen «active», se nederst i src/website/templates/base_with_nav.html).

At menynen har active-klassen satt betyr da at den har blitt klikket på, og klassen må derfor gjøre to ulike ting:

• På små skjermer betyr dette at navigasjonsmenyen er åpen.

• På store skjermer betyr det at navigasjonsmenyen er kollapset.

For å oppnå denne effekten brukes media-queries av denne typen når det er snakk om å vise eller skjule elementer (vise/skjule selve hamburgerikonet):

@include media-breakpoint-down(md) {
    display: block;
    &.active {
        display: none;
    }
}
@include media-breakpoint-up(lg) {
    display: none;
    &.active {
        display: block;
    }
}

og media-queries av denne typen når det er snakk om å vise eller skjule selve navigasjonsmenyen (som aldri har display: none;, men skjules ved å posisjonere den til venstre for skjermen):

nav.sidemeny {
    left: -$sidebar-width;
    &.active {
        left: 0;
    }
    @include media-breakpoint-up(lg) {
        // Fra breakpoint lg og opp bytter vi om logikken for skjult/vist meny.
        left: 0;
        &.active {
            left: -$sidebar-width;
        }
    }
}

CSS

Navigasjonsmenyen er en nøstet <ul>-liste av lenker.

Når man holder muspekeren over et menyvalg ønsker vi at bakgrunnsfargen skal endre seg i hele navigasjonsmenyens bredde. For å få til dette oppfører listene seg slik:

• Listen selv har ingen innrykk (left margin/padding), alle elementene vises rett under hverandre uavhengig av nøsting.

• <a>-elementene vises som block (mot normalt inline).

• For å vise de nøstede listene med riktig innrykk spesifiseres padding-left i CSS slik:

  • En lav defaultverdi for alle lenker i lista (ul a).

  • En høyere verdi for nøstede lenker (ul > li > ul a).

Vi ønsker også at menyen ikke skal vise alle undersider, kun undersidene i den delen av sidetreet man er inne på (dvs. ekspanderende meny). Wagtailmenus genererer hele menystrukturen med både toppnivåsider og alle toppnivåsidenes undersider, og vi skjuler de uønskede undersidene med:

• Vis alle lister (defaultverdi): ul  { display: block; }

• Skjul alle lister på nivå 2: ul > li > ul  { display: none; }

• Vis lister på nivå 2 som har klassene ancestor eller active satt: ul > li.ancestor > ul,  ul > li.active > ul  { display: block; }