CMS Made Simple Forums

Posted: **Fri Dec 18, 2009 9:33 am**

Beste mensen,

Ik vond het menu van arnaud van de website www.gallgrotehoutstraat.nl erg mooi en ben dus zelf ook gaan experimenteren voor een plaatjes menu op basis van zijn code. Nu is dit op zich gelukt, maar ik zou graag hebben dat het actieve menuitem dezelfde eigenschappen en achtergrondafbeelding heeft als de hover-status.
Dit lukt me niet.

Nu ik jullie toch weer lastig val meteen maar een tweede vraagje. Kan ik regelen dat alle menuplaatjes direct geladen worden zodat je bij de eerste hover-actie van de bezoeker niet een hapering ziet?

Onderstaand mijn code van mijn horizontale menu:

Code: Select all

#prodmenu ul {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    width: 68px;
    list-style: none;
}

#prodmenu li, #prodmenu li a {
    display: block;
    float: left;
    text-decoration: none;
    background-position: left top;
    background-repeat: no-repeat;
    height: 68px;
    padding: 0;
    margin: 0px 1px;
}

#prodmenu li a span {
    display: inline;        /* was none */
    visibility: visible;     /* was hidden */
    font-size: 14px;
}

#prodmenu #praktijkbutton {
    background-position: right top;
    background-repeat: no-repeat;
    background-image:url('uploads/images/horizmenu/tab_paars3.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #000;
    font-weight: bold; 
}

#prodmenu #praktijkbutton:hover, #prodmenu #praktijkbutton.selected {
    background-image:url('uploads/images/horizmenu/tab_grijs3.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #fff;
    font-weight: bold; 
}

#prodmenu #fysiotherapie{
    background-position: right top;
    background-repeat: no-repeat;
    background-image:url('uploads/images/horizmenu/tab_groen3.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #000;
    font-weight: bold; 
}

#prodmenu #fysiotherapie:hover, #prodmenu #fysiotherapie.selected {
    background-image:url('uploads/images/horizmenu/tab_grijs_erik.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #fff;
    font-weight: bold; 
}

#prodmenu #voeding{
    background-position: right top;
    background-repeat: no-repeat;
    background-image:url('uploads/images/horizmenu/tab_oranje3.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #000;
    font-weight: bold; 
}

#prodmenu #voeding:hover, #prodmenu #voeding.selected {
    background-image:url('uploads/images/horizmenu/tab_grijs_evert.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #fff;
    font-weight: bold; 
}

#prodmenu #kinderen{
    background-position: right top;
    background-repeat: no-repeat;
    background-image:url('uploads/images/horizmenu/tab_geel3.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #000;
    font-weight: bold; 
}

#prodmenu #kinderen:hover, #prodmenu #kinderen.selected {
    background-image:url('uploads/images/horizmenu/tab_grijs_kdv.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #fff;
    font-weight: bold; 
}

#prodmenu #supletie{
    background-position: right top;
    background-repeat: no-repeat;
    background-image:url('uploads/images/horizmenu/tab_blauw3.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #000;
    font-weight: bold; 
}

#prodmenu #supletie:hover, #prodmenu #supletie.selected {
    background-image:url('uploads/images/horizmenu/tab_grijs_pillen.png');
    height: 55px;
    width: 156px;
    padding-top: 84px;
    text-align: center;
    color: #fff;
    font-weight: bold; 
}

En de URL: http://fitmaatschap.nl/AAA/index.php?page=erik

De site wordt nog afgebouwd hoor, maar dat neemt niet weg dat een tip altijd welkom is:).

Thanks - Evert

Posted: **Fri Dec 18, 2009 9:50 am**

----------

Posted: **Sat Dec 19, 2009 6:38 pm**

arnoud!

De preload werkt fantastisch, thanks!

De class="selected" lijkt niet te werken, nu blijft alles altijd op de selected achtergrondafbeelding staan, ongeacht of de link nu geselecteerd is of niet.

Ik bedoelde eigenlijk dat ik enkel de pagina die in gebruik is de hoverstaturs mee wilde geven, de andere niet.

Moet ik het anders doen?

Thanks voor de support!

Evert

CMS Made Simple Forums

Active parent bij menu met plaatjes

Active parent bij menu met plaatjes

Re: Active parent bij menu met plaatjes

Re: Active parent bij menu met plaatjes