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