Hensigten med denne artikel er at give et kort overblik over moderne JavaScript modulbiblioteker til fremstilling af såkaldte dropdown-menuer, samt at kort at introducere et sådant, nemlig hollænderen Ger Versluis’ HV Menu.
På dette website finder du en del yderligere, lidt ældre artikler om emnet i sektionen navigation.
I de senere år er jeg imidlertid blevet overbevist om fordelene ved en anden tilgang til navigationsdesign, som du finder beskrevet i mine nyere artikler om emnet: Introduktion til stylesheet-formaterede menuer.
For dem der alligevel gerne vil forsøge sig med det emne, denne artikel handler om, vil jeg alligevel forsøge at beskrive denne lidt ældre type menuer.
Et JavaScript modulbibliotek (eller API, Application Programming Interface) er en samling JavaScript funktioner og objekter, der er udviklet til på en webside at skabe en eller anden speciel effekt – i det aktuelle tilfælde altså en dropdown-menu.
Som regel vil et sådant modulbibliotek helt af sig selv skabe en sådan dropdown-menu, blot scriptet indsættes på siden. Men næsten per definition vil modulbibliotekets "naturtilstand" ikke svare til de behov, den enkelte websidekonstruktør har. Derfor er disse API'er indrettet således, at websidekonstruktøren i et supplerende JavaScript kan give en række variable de værdier, der passer netop hende.
Den her omtalte klasse af modulbiblioteker har det tilfælles, at det er dropdown-menuer. Denne effekt – at en menu vises ved et klik og forsvinder igen ved et klik (eller at det samme sker ved mouseover og mouseout) – beror på dynamisk HTML, en kombination af JavaScript og CSS-teknologien (stylesheets).
Det er – for at sige det mildt – ganske vanskeligt for et websidekonstruktør med kun et behersket kendskab til JavaScript programmering, på egen hånd at udvikle et script, der virker robust og sikkert på tværs af alle gængse browserversioner. For at indse det behøver du næsten kun at kigge på kildekoden til f.eks. det her omtale modulbibliotek, Ger Versluis’ "HV Menu".
Størstedelen af de modulbiblioteker, der er tilgængelige på nettet og beskrevet i diverse litteratur, er udviklet i fra perioden 1998 til 2000. De er udviklet med specielt øje på de større og mindre uoverensstemmelser der mellem JavaScript og CSS-tolkningen i de to "store" version 4 browsere, Internet Explorer 4, 5, og 5.5 og Netscape Navigator 4.xx. Det er den første browsergeneration, der kan udnytte de muligheder, der ligger i moderne JavaScript og CSS2.
Nyere browsere, Internet Explorer 5, 5.5 og nu også version 6 og Netscape Navigator 6 – nærmer sig mere og mere hinanden og den fælles standard, der er udviklet af W3C. Denne heldige udvikling har sine mindre heldige sider, for så vidt browserfabrikanterne i nogle tilfælde er nødt til at droppe tolkningen af egenskaber, de tidligere har understøttet.
Dette er tydeligst, når vi betragter den ellers meget standard-kompatible Netscape 6 browser. For at kunne opnå dette, har Netscape måtte droppe understøttelsen af den LAYER-markør, der i hele version 4 serien har været nøglen til dynamisk HTML i Netscape browseren.
Og dermed invalideres stort set alle de modulbiblioteker, der er udviklet i den ovenfor nævnte periode. De virker ganske enkelt ikke, hvis de udsættes for en Netscape 6 eller Internet Explorer 6 browser.
En del programmører har hurtigt lagt et stort arbejde i opdateringen af deres modulbiblioteker, men deres mål er ikke altid det samme som websidekonstruktørens. Mike Hall‘s ellers fremragende modulbibilotek er f.eks. opdateret – men på den bekostning, at det kun virker i de nyeste browsere. (www.brainjar.com).
Hvorvidt et givet modulbibliotek er opdateret eller ej lader sig ofte kun afgøre ved en konkret afprøvning.
Det er bl.a. af hensyn til ovenstående, at jeg har valgt Ger Versluis‘ menusystem som emne for denne introduktion til menu API'er.
Du kan downloade hele pakken til dette modulbibliotek fra Ger Versluis' hjemmeside. Den seneste udgave mens dette skrives er fra oktober 2005.
I denne zip-fil finder du følgende filer:
Denne side er senest opdateret: 26. June, 2008