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;
}De site wordt nog afgebouwd hoor, maar dat neemt niet weg dat een tip altijd welkom is:).
Thanks - Evert
