skriv ut »Webdesignskolan har tillstånd att använda och återge DHTML-scripten till våra besökare men alla rättigheter tillhör Ger Versluis som är upphovsman till scripten. Menyn får användas fritt för privat bruk (icke kommersiella sidor) men vill du använda menyn till ditt företag så tveka inte att kontakta honom med ett trevligt mail och be om tillstånd :-)
Mer information om installation, FAQ mm och aktuella versioner av scriptet hittar du hos Ger Versluis: www.burmees.nl/menu/menus.htm »
Två externa filer innehåller scriptkoden och länkas till ditt HTML-dokument med koden:
<script type='text/javascript'>function Go(){return}</script>
<script type='text/javascript' src='menu_var.js'></script>
<script type='text/javascript' src='menu131.js'></script>
...övrigt sidinnehåll här
</body>
Detta är alltså den enda koden du behöver ange på de sidor som ska visa menyn. Alla framtida ändringar i menyn sker i den externa filen. Om du använder frames lägger du endast koden i din "menysida". Om du inte använder frames lägger du koden på varje sida som ska visa menyn. Scripten som bygger upp menyn lägger du i valfri mapp och anger sökvägen till scripten i de dokument som ska visa menyn. De två scriptfilerna är:
Variabelfilen där du anger alla egenskaper för menyn. Varje inställning förklaras med kommentarer och filen är alltså självinstruerande. Öppna och spara filen som vanlig text i text Notepad (Anteckningar).
OBS! Menyn kan ha flera egenskaper än de exempel som visas nedan och du bör läsa installmenus.htm » för mer detaljerade instruktioner.
(I exemplen nedan används olika namn på filen beroende på om menyn ska användas i frames med rader, kolumner eller på varje sida).
menu131.js
Scriptfilen som utför de val du gjort i variabelfilen. Du bör inte öppna eller ändra denna fil! Namnet "menu131.js " anger att det är version 13.1 av scriptet och du kan besöka upphovsmannen Ger Versluis för information om aktuell version: www.burmees.nl/menu/menus.htm »
Exempel 1:
Menyn på varje sida
Det här är metoden för dig som inte vill använda frames men ändå vill ha en meny på varje sida som dessutom är lätt att ändra utan att behöva koda om alla sidorna.
Menyn på varje sida:
Klicka här för att se
exemplet ovan »
Steg 1:
koden för att infoga menyscripten:
Här är HTML-koden som du använder på alla de sidor som ska visa menyn:
<html>
<head>
<title>Min webplats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type='text/javascript'>function Go(){return}</script>
<script type='text/javascript' src='menu-single_var.js'></script>
<script type='text/javascript' src='menu131.js'></script>
...övrigt sidinnehåll här
</body>
</html>
Du bör alltid ha med:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
För full kompatibilitet bör du även ha med namespace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Om dina sidor innehåller funktioner som gör att du inte vill använda namespace bör du använda en äldre verson av scriptet (version 9.11) vilket innebär att menyn saknar vissa funktioner - läs mer om versionerna på www.burmees.nl/menu/menus.htm »
Steg 2:
scriptfilerna som bygger menyn:
Spara filerna nedan och lägg dem i samma mapp som HTML-sidorna (om du lägger scripten i annan mapp måste du ange rätt sökväg i koden ovan):
menu-fruktsingle_var.js
Steg 3:
Pilarna som visar undermeny:
Om du vill ha pilar som kan användas för att indikera undermenyer kan du göra egna bilder eller använda bilderna nedan. Högerklicka på bilden och spara den:
Steg 4:
konfigurera variabelfilen:
Gör de ändringar som behövs för att få din egen personliga meny. Instruktioner finns som kommentarer i filen. OBS! Menyn kan ha flera egenskaper än de exempel som visas nedan och du bör även läsa installmenus.htm » för mer detaljerade instruktioner.
Exempel 2:
Menyn i frameset (rader)
Om du använder menyn i frames kan måldokumenten öppnas i valfri ram (genom att ange namn på målramen), hela fönstret eller nytt fönster (top - blank - parent ). I variabelfilen kan du ange ett ramnamn som mål (target) men med javascript som länk kan du även ange andra målramar.
Menyn i frames (rader):
Klicka här för att se
exemplet ovan »
Steg 1:
koden för frameset i två rader (index.htm)
Viktigt! Ramen som innehåller "menysidan" och scriptkoden måste ha namnet "navig" men övriga ramar får ha valfria namn. I exemplen används ramnamnen navig och main.
<html>
<head>
<title>Min webplats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="meny.htm" name="navig" frameborder="no" scrolling="no" noresize id="navig">
<frame src="start.htm" name="main" scrolling="auto" id="bottom">
</frameset>
</html>
Du bör alltid ha med:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
För full kompatibilitet bör du även ha med namespace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Om dina sidor innehåller funktioner som gör att du inte vill använda namespace bör du använda en äldre verson av scriptet (version 9.11) vilket innebär att menyn saknar vissa funktioner - läs mer om versionerna på www.burmees.nl/menu/menus.htm »
Steg 2:
Koden för menysidan (meny.htm)
Startsidan (start.htm) behöver inte innehålla någon speciell kod för att menyn ska fungera men här är koden till menysidan (meny.htm):
<html>
<head>
<title>Meny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type='text/javascript'>function Go(){return}</script>
<script type='text/javascript' src='menu-rows_var.js'></script>
<script type='text/javascript' src='menu131.js'></script>
</body>
</html>
Steg 3:
scriptfilerna som bygger menyn:
Spara filerna nedan och lägg dem i samma mapp som HTML-sidorna (om du lägger scripten i annan mapp måste du ange rätt sökväg i koden ovan):
menu-fruktframes_var.js
Steg 4:
Pilarna som visar undermeny:
Om du vill ha pilar som kan användas för att indikera undermenyer kan du göra egna bilder eller använda bilderna i vårt exempel - se punkt 3 "Meny på varje sida" ovan »
Steg 5:
konfigurera variabelfilen:
Gör de ändringar som behövs för att få din egen personliga meny. Instruktioner finns som kommentarer i filen. OBS! Menyn kan ha flera egenskaper än de exempel som visas på WDS och du bör även läsa installmenus.htm » för mer detaljerade instruktioner.
Exempel 3:
Menyn i frameset (kolumner)
Om du använder menyn i frames kan måldokumenten öppnas i valfri ram (genom att ange namn på målramen), hela fönstret eller nytt fönster (top - blank - parent ). I variabelfilen kan du ange ett ramnamn som mål (target) men med javascript som länk kan du även ange andra målramar.
Menyn i frames (kolumner):
Klicka här för att
se exemplet ovan »
Steg 1:
koden för frameset i två kolumner (index.htm)
Viktigt! Ramen som innehåller "menysidan" och scriptkoden måste ha namnet "navig" men övriga ramar får ha valfria namn. I exemplen används ramnamnen navig och main.
<html>
<head>
<title>Min webplats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="120,*" frameborder="no" border="0" framespacing="0">
<frame src="meny.htm" name="navig" scrolling="no" noresize marginwidth="5" marginheight="5" id="navig">
<frame src="start.htm" name="main" scrolling="auto" marginwidth="5" marginheight="5" id="main">
</frameset>
</html>
Du bör alltid ha med:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
För full kompatibilitet bör du även ha med namespace:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Om dina sidor innehåller funktioner som gör att du inte vill använda namespace bör du använda en äldre verson av scriptet (version 9.11) vilket innebär att menyn saknar vissa funktioner - läs mer om versionerna på www.burmees.nl/menu/menus.htm »
Steg 2:
Koden för menysidan (meny.htm)
Startsidan (start.htm) behöver inte innehålla någon speciell kod för att menyn ska fungera men här är koden till menysidan (meny.htm):
<html>
<head>
<title>Meny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type='text/javascript'>function Go(){return}</script>
<script type='text/javascript' src='menu-columns_var.js'></script>
<script type='text/javascript' src='menu131.js'></script>
</body>
</html>
Steg 3:
scriptfilerna som bygger menyn:
Spara filerna nedan och lägg dem i samma mapp som HTML-sidorna (om du lägger scripten i annan mapp måste du ange rätt sökväg i koden ovan):
Steg 4:
Pilarna som visar undermeny:
Om du vill ha pilar som kan användas för att indikera undermenyer kan du göra egna bilder eller använda bilderna i vårt exempel - se punkt 3 "Meny på varje sida" ovan »
Steg 5:
konfigurera variabelfilen:
Gör de ändringar som behövs för att få din egen personliga meny. Instruktioner finns som kommentarer i filen. OBS! Menyn kan ha flera egenskaper än de exempel som visas på WDS och du bör även läsa installmenus.htm » för mer detaljerade instruktioner.
Exempel 4:
Relativ positionering av menyn
Alla menyer anges med absolut positionering med värden i variabelfilen.
Om du däremot vill att menyn ska positioneras i en tabellcell <td>,
stycke <p> eller andra element måste menyn kopplas till ett
Lager som placeras i HTML-koden. I exemplet nedan är Lagrets namn
"MenuPos" och samma namn anges i konfigureringsfilen med variabeln:
var TargetLoc="MenuPos";
Vertikal meny i ett Lager med relativ positionering. Lagret kan placeras i tex en tabellcell som i exemplet. Bredd och höjd på Lagret ska vara samma som huvudmenynerna. I exemplet är var och en av de 5 huvudmenyerna 100x20 pixlar och den totala höjden blir då 100 pixlar:
<table><tr valign="top">
<td>
<div id='MenuPos' style='position:relative; width:100px; height:100px'>
</div>
</td>
<td>
</td>
</tr>
</table>
Steg 1:
koden för att infoga menyscripten och Lagret:
Här är HTML-koden som du använder på alla de sidor som ska visa menyn:
<html>
<head>
<title>Min webplats</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table>
<tr valign="top">
<td><div id='MenuPos' style='position:relative; width:100px; height:100px'></div></td>
<td></td>
</tr>
</table>
<script type='text/javascript'>function Go(){return}</script>
<script type='text/javascript' src='menu-relativecolumns_var.js'></script>
<script type='text/javascript' src='menu131.js'></script>
</body>
</html>
Steg 2:
scriptfilerna som bygger menyn:
Spara filerna nedan och lägg dem i samma mapp som HTML-sidorna (om du lägger scripten i annan mapp måste du ange rätt sökväg i koden ovan):
i övrigt samma steg som de andra menyerna. Variablerna som måste ändras är:
var MenuCentered="left";var MenuVerticalCentered="top";
var StartTop=0;
var StartLeft=0;
var FirstLineHorizontal=1;
var TargetLoc="MenuPos";
var FirstLineFrame="";
var SecLineFrame="";
var DocTargetFrame="";
var MenuUsesFrames=0;
Exempel 5:
Meny med bilder (onMouseOver)
Genom att använda bilder kan du designa din meny exakt som du vill ha den. Bilderna används istället för texten och du kan även ha bild för rollover-läge (onMouseOver). Tänk efter före när du använder bilder så att du enkelt kan ändra menyn i framtiden (byta ut och lägga till bilder). Exemplet nedan har en layout som gör att det kräver tid och tålamod för att ändra i menyerna - totalt innehåller menyn 60 st bilder!
OBS! Dina menybilder måste hämtas innan menyn kan visas i webläsaren och det kan ta tid. Om du vill använda bilder bör du se till att filstorleken är liten - exemplet nedan är långsamt med relativt tunga bilder:
Menyn med bilder:
Klicka här för
att se exemplet ovan »
se alla bilderna som används i menyn »
Steg 1:
koden för att infoga menyscripten:
Följ anvisningarna för menyerna ovan om hur du infogar scripten på varje sida eller i frames.
Steg 2:
scriptfilerna som bygger menyn:
Spara filerna nedan och lägg dem i samma mapp som HTML-sidorna (om du lägger scripten i annan mapp måste du ange rätt sökväg i koden ovan):
menu-bilder_var.js
menu131.js
se alla bilderna som används i exemplet »
Steg 3:
koden för bilder och rollover-bilder
I konfigurationsfilen kan du hoppa över alla variabler som anger formatering av färger och teckensnitt då bilderna ersätter all text och bakgrundsfärger. Kantlinjer mellan menyerna kan också anges till "0" om bilderna ska ligga exakt bredvid varandra. OBS! Ange alltid korrekt bredd och höjd för dina bilder (se gärna exempelfilens menu-bilder_var.js variabler).
Exempel på kod för bilder och rollover-bilder:
Menu1=new Array("rollover?"+BaseHref+"frukt.gif?"+BaseHref+"frukt_over.gif",
"frukt.htm","",7,48,138,"","","","","","",-1,-1,-1,"","");
Menu1_1=new Array("rollover?"+BaseHref+"ananas.gif?"+BaseHref+"ananas_over.gif",
"ananas.htm","",0,26,97,"","","","","","",-1,-1,-1,"","");
Menu1_2=new Array("rollover?"+BaseHref+"ap.gif?"+BaseHref+"ap_over.gif",
"apelsin.htm","",0,21,0,"","","","","","",-1,-1,-1,"","");
Menu1_3=new Array("rollover?"+BaseHref+"avo.gif?"+BaseHref+"avo_over.gif",
"avocado.htm","",0,21,0,"","","","","","",-1,-1,-1,"","");
Tips vid installation av menyn
DHTML-menyn är relativt enkel att konfigurera men kräver ändå en del tid att bygga upp. Välj den menytyp som passar dig bäst och utgå ifrån de variabler den innehåller men byt ut till dina egna värden och sökvägar mm. Du kan bara ha 1 st meny per sida.
Om du använder Windows XP SP2 eller andra program som blockerar "aktivt innehåll" bör du koppla bort funktionen när du testar menyn lokalt (när menyn senare används online sker ingen blockering). Du avaktiverar blockeringen i IE 6 (SP2) med menyn "Verktyg/Internet alternativ" och fliken "Avancerat":
När du testar script underlättar det att kunna se om och när det finns fel i scriptet. Om inte menyn visas är det något fel men med visning av scriptfel vet du att det är själva scriptet som felar... Använd menyn "Verktyg/Internet alternativ" och fliken "Avancerat":
OBS! I Firefox ser du eventuella scriptfel med menyn "Verktyg/JavaScript-konsol".
Mer information om installation, FAQ mm och aktuella versioner av scriptet hittar du hos Ger Versluis: www.burmees.nl/menu/menus.htm »
