Inkluderet menufil på alle sider

... genbrug enkeltelementer på flere sider

Indlæs andet indhold på denne side:

Se også:

Inkludere via javascript

Siden er opdateret 7. 12. 2011

At lade et javascript udskrive menuen er ikke noget, jeg vil anbefale, hvis man har mulighed for at bruge serverside-include. Søgemaskiner kan ikke læse menuen og dermed ikke indeksere siderne.

Skulle omstændigherne alligevel tvinge dig til denne løsning, starter vi med den samme sideopbygning, som vi havde ved include med shtml eller asp:

Sidens toptekst

Menupunkt 1

Menupunkt 2

Menupunkt 3

Sidens overskrift


sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst
Bundtekst - info til brugerne

I stedet for i menu<div>'en at inkludere menufilen, skrives et script på denne måde:

<script type="text/javascript">document.write(menu)</script>

Du opbygger dine sider efter samme mønster som før ved ssi. Med scriptet indsat ser siderne body-del sådan ud:

<body>
<div id="topbar"><h1>Sidens toptekst</h1></div>
<div id="menu">
<script type="text/javascript">document.write(menu)</script>
</div>
<div id="indhold">
<h2>Sidens overskrift</h2>
<p>sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst sidetekst</p>
</div>
</body>

Dernæst skal du have lavet et lille script i dine siders <head></head>:

<script type="text/javascript" src="../scripts/menukode.js"></script>

Du skal som ovenfor huske at definere stien til menufilen svarende til den faktiske placering i forhold til de sider, der bruger menuen:

js

Sidste skridt er så at lave selve menufilen. Jeg har allerede afsløret, at den hedder menukode.js. Extension .js er den vigtige del - det SKAL hedde sådan.
Vælger du et andet navn, skal du så bare rette i scriptet, der kalder menufilen oppe i sidernes <head></head>.

var menu='<ul><li><a href="side1.htm">Menupunkt 1</a></li><li><a href="side2.htm">Menupunkt 2</a></li><li><a href="side3.htm">Menupunkt 3</a></li></ul>'

Teksten i menufilen SKAL skrives i én linje. Der må IKKE indsættes optiske linjeskift ved at trykke på [Enter]! Dog er det tilladt at lave kode for tvungne linjeskift mellem menupunkterne.

Hvis din browser viser teksten i kodeboksen herover på to linjer, er det fordi din browser ombryder teksten, hvor der er et ordmellemrum. Koden er skrevet i en lang linje

Der er i filen tale om, at du definerer en variabel menu, hvis indhold derefter specifiseres. Det er denne variabel, der kaldes i sidernes menu<div> - vist med rød tekst.

Måden dette fungerer på er, at scriptet i sidens <head></head> indlæser menufilen. Scriptet i menu<div> placerer menufilens indhold det ønskede sted på siden.

Endelig skal siges, at denne metode virker fra alle servere og kan umiddelbart afprøves fra din egen harddisk, inden du uploader til din udbyders server.

Du skal dog være opmærksom på, at en ren javascriptmenu er den allersidste udvej, hvis du ikke har andre muligheder for at genbruge en enkelt menufil på mange sider:

Du skal selvfølgelig også have lov til at se det fungere i praksis. Jeg har derfor lavet to sider, der anvender den samme menu. Siderne hedder side1.htm og side2.htm. Den inkluderede menu hedder menukode.js.

knap  Se teknikken vist.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen november 2002
Hjemmesideskolen
Du er her: Forsiden - html - Inkluderet menu
Brugere lige nu: 1
Home Mail