Skjul og vis en menu
En menu som den til højre kan være problematisk, når den bliver alt for lang.
Derfor er jeg kommet på den idé at give brugeren mulighed for at fjerne den eller minimere henholdvis maksimere den. Du ser eksemplet her til højre på siden.
Effekten er først og fremmest interessant, når der er andre elementer i den højre kolonne. Det er der som regel ikke er på disse eksempelsider, men nok på sitens øvrige sider. I "det virkelige liv" lader man ikke sådan en plads i en højre eller venstre kolonne stå ubenyttet hen...
Det foregår, som du ser, ved at klikke på de små ikoner i overskriftsbjælken. Der er tale om én grafik, som er et Image Map. De koordinater, der gør billedet klikbart, ser du i tekstboksen lidt længere nede på siden.
Det, der er interessant her, er JavaScript funktionskaldet, der er knyttet til hver af billedets 3 hotspots. Der er tale om 2 forskellige funktioner, hhv. collapse(ID) og expand(ID), hvor ID repræsenterer det element, der skal ske noget med - henholdsvis menuens links (de gule felter) og det blå overskriftsfelt.
<map name="submenu">
<area coords="2,2,12,12" alt="Minimer menuen" shape="rect"
onfocus="this.blur()" href="javascript:collapse('menupunkter');">
<area coords="14,2,24,12" alt="Maksimer menuen" shape="rect"
onfocus="this.blur()" ref="javascript:expand('menupunkter')">
<area coords="26,2,36,12" alt="Fjern menuen" shape="rect"
onfocus="this.blur()" href="javascript:collapse('submenu')">
</map>
collapse() og expand() er to funktioner i mit modulbibliotek, der derfor skal være indlæst på websiden for at denne funktionalitet kan opnås. Du kan evt. pille de dele af biblioteket ud, som er relevante for lige præcis de effekter, du skal bruge, og lave et mindre omfangsrigt script. Hele modulbiblioteket fylder i sin nuværende udformning ca. 10 kb, mens de relevante dele til den her beskrevne anvendelse kun fylder ca. 1000 bytes.
Fjern den stiplede linie om det aktive element
En lille finesse fremgår også af den ovenfor citerede kode, i form af JavaScript eventhandleren onFocus. Det, der sker her, er at når et hotspot kommer i fokus ved at der klikkes på det, bringes det straks ud af fokus ved at bruge blur-egenskaben på det aktulle hotspot. Effekten af det er, at den stiplede linie, der i Internet Explorer omkranser et element i fokus, fjernes. Det mener jeg ikke, man skal gøre altid og helt rutinemæssigt, da også denne effekt er et vigtigt signal til brugeren. Men i dette tilfælde - med meget små områder - synes jeg, at den stiplede linie forstyrrer mere end den gavner.
Oprettet 3. dec. 2002.
Senest opdateret: 29. maj 2003.
