Dropdownmeny

Att användas när man visar informationen i en iframe som heter I1

Filer som behövs

Ladda ner javascriptfilerna nedan och spara dem på samma ställe som sidan som ska visa menyn

En variabelfil med menyalternativen
En menyfil (den ska man inte ändra något i)

Testsida där man kan kopiera htmlkoden rakt av och sedan ändra utifrån det

HTML-koden

Börja med att skapa ett helt nytt, tomt htmldokument och klistra sedan in följande på rätt plats eller spara ner testsidan ovan och ändra i den

I < head >-taggen ska följande kod in

   <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

    <!--

    function Init() {

    AnjunaLoc = document.getElementsByName ( ' I1 ')[ 0 ];

    }

    //-->

    </SCRIPT>

   

Bodytaggen ska se ut så här < body onload = "Init ();" >

och precis efter det ska det stå

    < script type = 'text/ javascript ' > function Go( ){ return }</ script >

    < script type = 'text/ javascript ' src = ' var.js ' ></ script >

    < script type = 'text/ javascript ' src = 'menu131.js' ></ script >    

        

Där menyn ska ligga ska det stå följande (där man kan ändra, bredd, höjd, left , top till mer passande värden, alternativt använda relativ positionering)

    < div id =" MenuPos " style ="position: absolute; width: 383px; height: 20px; z-index: 7; left: 300px; top: 106px" >

    </ div >

Relativ positionering

    < div id =" MenuPos " style ="position: relative; width: 383px; height: 20px; z-index: 7; " >

    </ div >

Menyn

För att få in dina menyval istället för min ändrar du i var.js. Öppna den i ett redigeringsprogram, själv föredrar jag PSpad

Man kan ändra färger, kantlinjer, teckensnitt mm, men det står tydliga kommentarer om vad varje sak gör. Det viktigaste att komma ihåg är vad som står överst
var NoOffFirstLineMenus=13; // Antal menyval i huvudmeny
och att det stämmer med antalet menyval på översta raden i din meny, annars kommer det inte att fungera sen.

Man måste också ändra var filerna ska öppnas. I mitt fall öppnar jag dem i en iframe som heter I1.
var DocTargetFrame="I1"; // Målram där länkade sidor ska öppnas

Längst ner i filen ändrar man vad som ska synas i menyn
Menu1= new Array("Start","start.html","",0,18,40,"","","","","","",-1,-1,-1,"","Startsidan");

De olika elementen avdelas med kommatecken. Det först som står är texten som visas, det andra sidan den länkar till. Nollan är att det inte finns några undermenyer till det här menyelementet. 18 är höjden, 40 är bredden. Det som står sist är texten som kan visas längst ner i webläsaren när man för musen över

För att lägga till undermenyer ändrar man helt enkelt nollan till så många undermenyer som man vill ha och samma sak med undermenyer till undermenyerna

Menu5= new Array("Hundliv","","",1,18,50,"","","","","","",-1,-1,-1,"","Hundliv");
Menu5_1= new Array("Träning","traning.html","",2,18,93,"","","","","","",-1,-1,-1,"left","Träning");

Menu5_1_1= new Array("Apportering","apportering/apportering.html","",0,20,80,"","","","","","",-1,-1,-1,"left","Apportering");
Menu5_1_2= new Array("Viltspår","viltspar.html","",0,20,80,"","","","","","",-1,-1,-1,"left","Viltspår");

En bra namnkonvention att följa är Menu1 för översta nivån, Menu1_1 för första menyvalets första undernivå osv så har man koll på hur många menyval man har.

Länkar

En utförligare beskrivning finns på Webbdesignskolan
Utvecklarens hemsida