Publicerad 12 augusti 2020

Undermeny

Undermenyn innehåller länkar till webbplatsens sidor på nivå 2 och neråt. På www.skr.se döljs andra nivå 2-länkar än den där man befinner sig när man klickat fram länkarna på nivå 3 och nedåt. Detta är dock inte obligatoriskt beteende för SKR-webbplatser.

Undermenyn ska inledas med en länkad rubrik som visar vilken huvudgren på webbplatsen man besöker. Under rubriken finns en linje med webbplatsens primära färg, det vill säga samma som linjen under aktivt menyval i huvudmenyn. Därefter listas alla sidor som ligger direkt under den valda huvudgrenen, det vill säga sidor på nivå 2.

Om en nivå 2-sida har egna undersidor har menyvalet en tillhörande ikon till höger som indikerar att sektionen går att fälla ut för att visa sidorna på grenens nivå 3.

Rubriker som löper på två rader linjerar i vänsterkant oavsett nivå.

Egenskaper meny generellt

Bredd: 370px (= 4 kolumner i ett 12-kolumners gridsystem med en totalbredd på 1170px)

border: 1px

border-color: #DEDEDE

font-family: Open Sans, Arial, Helvetica, sans-serif

color: #222222

Mouseover: understruken text

Egenskaper menyhuvud

font-size: 17px

font-weight: bolder

background-color: #F7F7F7

Färg linje under länkad rubrik: samma som linje under aktivt huvudmenyval

Tjocklek linje under länkad rubrik: samma som linje under huvudmenyval

Egenskaper meny nivå 2

font-size: 15px

font-weight: regular

Ikoner: högerriktad pil i cirkel

Egenskaper meny nivå 3

Aktiv nivå 2-länk

font-weight: bold

background-color: #FFFFFF

Ikon: nedåtriktad pil i cirkel

Menyval nivå 3-länkar

font-size: 15px

font-weight: regular

background-color: webbplatsens sekundära färg eller annan färg som uppfyller WCAG 2.1

Ikoner: högerriktad pil i cirkel

Egenskaper meny nivå 4

Aktiv nivå 3-länk

font-weight: bold

Ikon: nedåtriktad pil i cirkel

Menyval nivå 4-länkar

font-size: 14px

font-weight: regular

background-color: 30-40 % ljusare än bakgrundsfärgen för nivå 3-länkar

Ikoner: högerriktad pil i cirkel

Egenskaper meny nivå 5

Aktiv nivå 4-länk

font-weight: bold

Ikoner: nedåtriktad pil i cirkel

Menyval nivå 5-länkar

font-size: 14px

font-weight: regular

Indrag: 30px

background-color: 30-40 % ljusare än bakgrundsfärgen för nivå 3-länkar

Aktiv nivå 5-länk

font-weight: bold

Exempel

Informationsansvarig

  • Tomas Johansson Haavik
    Webbstrateg

Kontakta oss

Kontaktformulär SKR








Verifiering * (obligatorisk)
Vi kontrollerar att du är en människa och inte en robot.