Tak til Birger og Jørgen, som begge har hjulpet mig på vej, selvom jeg
ikke er i mål endnu.
Jeg må indrømme, at jeg langtfra forstår css - men har dog brugt Jørgens
syntaks og har da også fint fået ændret så skift af baggrundsfarve nu er
den samme ved mus og med TAB.
Det er dog endnu ikke lykkes mig at få undermenuen frem med TAB på samme
måde som ved mus. Jeg tror jeg forstår Birgers forslag med kan ikke få
det til at virke.
Noget af min menu ser således ud:
<div id="menubar">
<ul class="niveau1">
<li><a tabindex="1" onfocus="this.className='menuknapover'"
onblur="this.className='menuknap'" class="menuknap" id="li1"
href="index.asp" title="VinVenner.dk's hjemmeside" accesskey="s"><span
class="genvejstast">S</span>tartside</a></li>
<li><a tabindex="2" .....
.......
<li class="menupil"><a tabindex="5"
onfocus="this.className='menuknapoverpil'"
onblur="this.className='menuknappil'" id="li5" href="#"
title="Medlemsdata" accesskey="m"><span
class="genvejstast">M</span>edlemmer</a>
<ul class="niveau2">
<li> <a href="medlemmer1.asp">Mine egne data</a> </li>
<li> <a href="medlemmer2.asp">Øvrige medlemmer</a> </li>
<li> <a href="medlemmer3.asp">Tidl. medlemmer</a> </li>
</ul>
</li> .......
<li><a tabindex="9" onfocus="this.className='menuknapover'"
onblur="this.className='menuknap'" class="menuknap" id="li6"
href="bestyrelsen.asp" title="Bestyrelsens sammensætning"
accesskey="k"><span class="genvejstast">K</span>ontakt</a></li>
Og den tilsvarende css:
#menubar li a.menuknap {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width:9.4em;
}
#menubar li a.menuknappil {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width:9.4em;
background-image:url("billeder/pil22.gif");
background-position:right center;
background-repeat:no-repeat;
}
#menubar li a.menuknapover {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width:9.4em;
background-color: lightgreen;
}
#menubar li a.menuknapoverpil {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width:9.4em;
background-color: lightgreen;
background-image:url("billeder/pil22.gif");
background-position:right center;
background-repeat:no-repeat;
}
For musen har Jørgen lært mig at skrive:
#menubar ul.niveau1 li.menupil a.menuknappil:focus ul.niveau2 {
display: block;}
Og det virker
På opfordring fra Birger har jeg eksperimenteret med at få tilføjet noget
omkring a.focus for at få undermenuen frem med TAB.
Fx har jeg forsøgt
#menubar ul.niveau1 li.menupil a.menuknappil:focus ul.niveau2 {
display: block;}
Men desværre itv. uden held. Fejlen er helt klar at jeg famler lidt i
blinde med css-syntaksen. Intuitivt tror jeg forstår både Jørgen og
Birgers forslag - men når jeg så skal ændre lidt, så det passer til mig -
udebliver den ønske virkning, nemlig at få undermenuen frem.
mvh
/jens
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials