Webdesign 101 » Navigation » Grundlæggende

Menuer som eksterne filer

På den foregående side (Introduktion til navigationssystemer) kiggede vi på, hvorledes du i toppen og bunden af dit dokument kan indlejre en oversigt, der fortæller gæsten noget om, på hvilken side han/hun er, og ikke mindst hvilke øvrige dokumenter, han/hun har adgang til.

Det eksempel, vi så på, var en navigationsbjælke til dette website:

I virkeligheden er der ikke ret mange ben i at lave sådanne mini-dokumentoversigter. De er ens - eller stort set ens - fra dokument til dokument i samme sektion.

Det kan derfor være en god idé at overveje, om vi virkelig behøver at klippe og klistre fra den ene side til den anden måske rigtig mange gange.

Tricket her er at lave 1 fil og hente den ind i hvert af de dokumenter, der skal forsynes med en sådan menu bar.

Måden at gøre det på er at lave filen i et eksternt javascript og dernæst hente dette script ind i det dokument, hvor du du ønsker din menu:

Måden, hvorpå et et eksternt javascript hentes ind i et dokument, er at placere en reference det sted i dokumentet, hvor man ønsker javascript effekten. Her er denne reference for ovenstående lille menu:

<script type="text/javascript" 
-->	src="[sti]topmenubar.js"></script>	

Det minder jo en del om måden, hvorpå vi refererer til et eksternt Stylesheet. Det, der er interessant her, er sti og filnavn.

Nu kommer der jo ikke noget fornuftigt ud af denne øvelse, medmindre filen topmenubar.js er lavet korrekt. Derfor er vi nødt til nu at lære os lidt javascript.

Filen topmenubar.js ser således ud:

Det javascript, vi anvender, er meget begrænset, nemlig kun metoden document.write, som er en ordre om at skrive noget til skærmen. Dette "noget" følger så efter, indrammet af paranteser og anførselstegn. En document.write linie afsluttes med semikolon. BEMærk! at dersom du bruger dobbelte anførselstegn i HTML-linierne, skal JavaScript anførselstegnene være enkelte, og vice versa.

Hvis du lissom filtrer javascript fra er det ret tydeligt, at det, der skrives her, er simpel HTML, svarende til det, du ser et linier højere oppe i dette dokument.

At det ser lidt mere kompliceret og omfattende ud, skyldes kun, at jeg af praktiske årsager foretrækker at lægge det hele ind i en tabel.

Lad os resumere: Det, der sker her, er, at vi laver et javascript, der skriver de ønskede HTML-linier på skærmen. Dette javascript hentes ind i vort dokument på det sted, hvor vi ønsker, det skal stå.

Stiens betydning

Her kan benyttes relative referencer, som det ses, men absolutte referencer er meget bedre - der behøver du ikke at være i tvivl om den korrekte sti.

Tænk lige lidt over dette: Den ovenstående navigationsbjælke er indsat i dette dokument, navigation2.php, der befinder sig i folderen /naviger/ relativ til site root. Men folderen /naviger/ indeholder underfoldere, f.eks. folderen /naviger/kontrolpanel/ (der præsenterer et alternativt navigationssystem). Ønsker vi nu at referere til forsiden af navigationssektionen, er stien pludselig ikke som ovenfor index.php, men ../index.php.

Der er to udveje ud af dette. Den ene er at lave to eller flere forskellige udgaver af JavaScript filen med stier, der svarer til behovet på forskellige niveauer i fil-hierarkiet. Den anden udveje, som i realiteten er den eneste farbare, hvis sitet har blot et rimeligt omfang, er at benytte absolutte stier eller site relative stier. Det er det, der er gjort i den menubjælke, der er gengivet i tekstboksen.

Syntaksen for en site relativ sti er til dette dokument /naviger/navigation2.php. Det er skråstregen foran, der gør hele forskellen. Instruksen til browseren er: Gå til site root og følg stien efter skråstregen.

Site relative stier virker kun på sider, der indlæses via http-protokollen fra en webserver, og altså ikke hvis du indlæser html-dokumentet fra harddisken eller fra netværket. Det vil sige, de sider, du arbejder med, skal være placeret på en webserver.

Mere fancy menuer

Uanset, om du nu bruger den ene eller den anden metode (til at lave navigationsbjælker, er der ikke noget i vejen for, at du kan lave disse menuer lidt mere elegante. I eksemplet herover er der ikke gjort noget særligt ud af designet på menuen.

For tildels at illustrere, hvad du kan gøre, har jeg lavet en lidt mere præsentabel udgave af en minimenu, jeg en overgang har anvendt til afsnittet om javascript rollovers:

Ønsker du at arbejde noget mere med denne teknik, kan du evt. studere JavaScript koden til denne menu:

Vi har nu kigget på de mest simple menusystemer i dokumentet Navigation og på lidt mere avancerede i dette dokument. Inden vi går over til at kigge på, hvorledes du opretter og anvender menusystemer i rammer (frames), bør vi nok kigge på den måske mest sædvanlige måde at anvende "simple" menusystemer på: Menuer i tabeller.


 

Brug ikke eksemplerne

Menuerne på denne side er kun eksempler, så du kan ikke forvente, at de virker.

E-mail nyhedsbrev

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.