DHTML menu modulbiblioteker

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.

DHTML 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.

Hvad er et modulbibliotek?

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.

Hvorfor et modulbibliotek

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".

Pas på browserkompatibiliteten

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.

Find et opdateret modulbibliotek

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.

Ger Versluis‘ modulbibliotek

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:

install.htm
En kvikstart guide til indsætning af de nødvendige filer på en webside.
menu_com.js
Selve modulbiblioteket.
example.htm
En eksempelside, tilrettet af programmøren.
exmplmenu_var.js
Den supplerende JavaScript-fil, hvori de variable i menu_com.js sættes til de værdier, der skal være gældende på eksempelsiden.
install-frames.htm
En guide til anvendelsen af menuerne i et frameset.
config.htm
En vejledning i oprettelse og tilretning af den applikationsspecifikke JavaScript-fil – det vil sige, den du skal oprette, for at menu_com.js tér sig sådan, som du ønsker. (Denne fil har jeg omformateret noget, for at den skal kunne ses på en ordinær webside. Versluis kan være en fremragende JavaScript programmør, men websidelayout har han tilsyneladende ikke nogen stor interesse for).
tri.gif, tridown.gif og trileft.gif
Tre grafikfiler, der skal bruges i menupunkter, der har underpunkter

Denne side er senest opdateret: 25. June, 2008