Menu med highlight af aktuel side

Ofte kan det i en listemenu være hensigtsmæssigt at kunne se hvilken side, der vises aktuelt (som f.eks. ved søgning med Google).

Dette kan gøres i CSS med '.active' (styrer 'li'-boksen) og '#sub-header' (styrer 'a'-tagget) samt jQuery koden nedenfor. Den øvrige kode viser / styrer selve menuen.

I den aktuelle demosituation kan menuen ikke skifte til en anden side. Derfor: Tryk på et menupunkt og derefter på 'Genindlæs side'.

jQuery

Sidst i head-delen indsættes:

CSS

Hele menuens CSS består af:

/* AKTUELT AKTIVT MENUPUNKT*/
.active{    /* Aktiv Li: Farve på baggrund og borderbund*/
    background: grey;
    border-bottom: solid 4px red;
}

#sub-header .active a{    /* Aktiv Litekst: Farve på baggrund, tekst og understregning på tekst*/
    background: green;
    color: yellow;
    border-bottom: solid 4px lightgreen;
}

/* MENU*/
#menux{    /* menutekst */
    font-family: verdana;
    font-size: 12px;
    font-weight: bold;
}

#menux ul{    /* højde på og centrering af ul */
    line-height: 60px;
    text-align: center;
}

#menux ul li{    /* Li på række*/
    display: inline-block;
}

#menux ul li a{    /* Farve på Li-tekst */
    color: pink;
}

#menux ul li a:hover {    /* Farve på Li-tekst ved hover*/
    color: red;
}

#menux ul li a:active {    /* Farve på Li-tekst ved trykket mus*/
    color: white;
}

#menux ul li a:link {    /* Ingen understregning af link */
    text-decorantion: none;
}

a:visited{    /* Farve for aktiv efter afsluttet musetryk */
    background-color: yellow;
}

.aktuel{
    color: black;
}

.menpad{    /* padding omkring skillestreger i li */
    padding: 0 17px 0 17px;
}