Ger Versluis' hierarkiske menu - 6

Downloader du pakken og kigger på eksemplerne, vil du måske bemærke, at URL'erne i hovedmenuens punkt 4 og 5 er noget anderledes end en simpel sidehenvisning:

Menu4=new Array(
"Menupunkt 4",
"javascript:NewWin=window.open(\"file4.htm\",\"NWin\");
-->	window[\"NewWin\"].focus()","",
0,20,100,"","","","","","",-1,1,-1,"","");

Menu5=new Array(
"Menupunkt 5",
"javascript:top.location.href=\"file5.htm\"","",
2,20,100,"","","","","","",-1,-1,-1,"","");

Ideen med disse eksempler er at illustrere netop det, at du kan indsætte JavaScript-funktioner i stedet for almindelige sidehenvisninger.

Åbne et nyt browservindue

Den første linie, der vedrører menupunkt 4, har til formål at åbne et nyt browservindue og sikre, at dette er i fokus (og altså ikke bliver skjult af det browservindue, vi henviser fra). Denne funktionalitet fungerer efter hensigten i mine eksempler, prøv f.eks. at klikke på hovedmenuens punkt 4 i Eksempel med baggrundsgrafik.

Personligt ville jeg måske nok bruge følgende syntaks:

Menu4=new Array(
"Menupunkt 4",
"javascript:newWindow()","",
0,20,100,"","","","","","",-1,-1,-1,"","");

- og så definere funktionen i head-delen af siden:

<script type="text/javascript">
function newWindow() {
	nytVindue= window.open("file4.htm","",
	-->	"width=650, height=400, top=50, left=50, 
	-->	scrollbars=yes,menubar=yes,toolbar=yes");
	window.nytVindue.focus();
}
</script>

Til denne øvelse har jeg lavet endnu en eksempelside, der er meget mage til eksempel 2: Åbne ny browservindue

Om du gør det på den ene eller den anden måde er uden betydning. Grunden til, at jeg synes bedre om min metode er, at jeg nemt kommer til at lave tastefejl, når jeg skal inkluderer meget JavaScript i en sådan URL-streng.

Indlæs ny webside i hele browservinduet

Menpunkt 5 URL'en er også erstattet af noget JavaScript:

Menu5=new Array(
"Menupunkt 5",
"javascript:top.location.href=\"file5.htm\"","",
2,20,100,"","","","","","",-1,-1,-1,"","");

Ideen med denne syntaks har mest (kun?) værdi, når den anvendes i et frameset. Den sikrer nemlig, at file5.htm overskriver hele frameset'et. Dette svarer til et normalt link i et frameset med attributten target="_top". Du kan prøve effekten af dette på Eksempel på et frameset med HV-menu ved at klikke på menupunkt 5 i menuen eller på linket på indholdssiden.

Jeg må nok understrege, at det er aldeles afgørende, at du bruger denne syntaks, hvis du anvender menuen i et frameset, når du linker til eksetrne websider. Ellers ender den fremmede side i dit indholdsvindue. Ved at klikke på menupunkt 1 i Eksempel på et frameset med HV-menu kan du se den (for mig i hvert fald!) afskrækkende virkning af sløseri på dette punkt.

Udskrivning af websider med HV-menu

Når du opretter et stylesheet med medietypen "print" er standard­metoden til skjule elementer, du ikke ønsker skal optræde på udskriften, at sætte elementernes display-værdi til none. På denne webside som på de fleste andre på denne site er menuen knyttet til en ellers tom div med id="menubox", sålunde:

<div id="menubox">
</div>

Hvis jeg vil skjule menuen er det imidlertid ikke tilstrækkeligt at sætte dette elements display-værdi til none i et stylesheet. Menu er ikke indeholdt i elementet, der kun tjener som et referencepunkt, og menuen arver derfor ikke elementets egenskaber.

Tricket til at skjule menuen har jeg fra menuens ophavsmand, Ger Versluis, der meget venligt har svaret på mine forespørgsler om sagen. Hans løsning får du her:

I den fil, hvor du finder alle variable vedrørerende menuen, findes umiddelbart efter variabel-deklarationerne 4 funktionsdeklarationer:

function BeforeStart(){return}
function AfterBuild(){FrstCntnr.className='noprint'}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}

I eksemplet herover har jeg tilføjet en linie i funktionen Afterbuild(), der hæfter en class på elementet FrstCntnr. Det er det med grøn skrift, det handler om.

Tilføjer du nu i dit printstylesheet formreglen .noprint {display:none;} vil menuen forsvinde, når websiden skrives ud til printeren.

Mere er der sådan set ikke i den sag, som er specielt for HV-menu. Men man skal jo vide det for at kunne gøre det.

Jeg har haft problemer med at få det til at virke 100 % i Internet Explorer 5 og 6, når jeg benytter en lodret stillet menu. Problemet bestod i, at første menupunkts undermenu fortsat var synlig i udskriften.

Appellen til mine læsere medførte et halvt dusin henvendelser med det halve til den ene side og det andet halve til den anden side. En henvendelse til Ger Versluis gav til resultat, at han ikke kunne genskabe problemet med de selvsamme filer, som gav det uønskede resultat på min PC.

Jeg må indrømme, at jeg indtil har opgivet at finde løsningen på problemet, så meget des mere som det kun viser sig i Internet Explorer 6, kun ved den lodretstillede menu (og endda ikke i alle tilfælde) og kun når man bruger "Print Preview"-funktionen, og altså ikke på en side, der rent faktisk udskrives.

Konklusion

På 6 websider beskriver jeg en del aspekter omkring konfigurering og brug af hollænderen Ger Versluis dynamiske menusystem. Det skulle gerne være nok til at sætte dig i gang med at eksperimentere med dette fortræffelige system.

Webdesign 101 | | Jørgen Farum Jensen | | webmaster@webdesign101.dk
Copyright © 2002,2003 Jørgen Farum Jensen