Dynamisk meny

Hva

I dette eksempelet skal vi lage en dynamisk meny. Vi skal bruke egne attributter på HTML-elementer.

Vi trenger å la menyen ekspandere når vi klikker og vi vil fjerne elementer som ligger i andre grener av menyen. Samtidig ønsker vi å la menyen ekspandere til riktig status dersom vi, f.eks. ved en link velger et element.

Det er selvsagt mange måter å ordne dette på men jeg har valgt følgende løsning:

Hver menyelement må ha en id-attributt. Denne er entydig og kan være en vilken som helst tekst. Det er denne id-attributten som identifiserer det valgte elementet med tanke på å utføre handlinger på grunnlag av brukerens valg, f.eks. AJAX-access til data.
I tilleg tildeler jeg ved opplasting av siden hvert menyitem en entydig verdi som matcher posisjonen i menyen rekkefølgen i hvert nivå beskrives ved et siffer. F.eks angir 23 et item som er nummer to på første nivå og nummer 3 iandre nivå. ( merk at jeg defor har begrenset antall paralelle valg i hvetr nivå til 10. Det er enklet å endre dette i koden). Denne attributten gjør kodingen mye enklere. For å lagre denne informasjonen om hvert menyitem benytter jeg en egen attributt som jeg har kalt: data-marker. HTML, i motse4tning til XHTML og HTML4, validere med slike egne attributter. Det er anbefalt å gi dem et navn som begynner på data-

Det er selvsagt en fare med slike egne attributter siden navnet for kan komme i konflikt med navn i biblioteker du importerer.

Et lite eksempel med varierende dybde i menytreet. Her gjør vi ikke noe annet ved brukerens valg enn å vise fram id-verdien til det valgte elementet.

Asia

India

Kina

Beijing

Europa

Norge

Østtfold

Moss

Halden

Finnmark

Alta

Kautokeino

Italia

Amerika

Nordamerika

Søramerika

Peru

Brasil

Bare for å teste direkte identifikasjon:

Du kan også åpne den i et eget vindu for å se nærmere på koden:
test.html https://borres.hiof.no/wep/js/ex/dynmenu/test.html

Selve menyen er i utgangspunktet skrevet slik:

<div class="testcontainer">
<div id="dynmenu" class="dynmenu">
    <div id="asia">Asia
        <div id="india">India</div>
        <div id="kina" >Kina
            <div id="beijing" >Beijing</div>
        </div>
    </div>    
    <div  id="europa">Europa
        <div id="norge" >Norge
            <div  id="ostfold" >Østtfold
                <div id="moss" >Moss</div>
                <div id="halden" >Halden</div>
            </div>
            <div  id="finnmark" >Finnmark
                <div id="alta" >Alta</div>
                <div id="kautokeino" >Kautokeino</div>
            </div>            
        </div>
        <div id="italia" >Italia</div>    
    </div>
    <div  id="amerika">Amerika
        <div id="namerika">Nordamerika</div>
        <div id="samerika">Søramerika
            <div id="peru" >Peru</div>
            <div id="brasil">Brasil</div>
        </div>
    </div>
</div>

Koden som befolker siden og handterer museaksjoner er slik:

// name of the attribute we use for menuplacement
var MARKER="data-marker";
// id for menu
var MENU="dynmenu";
// the selected marker
var curMarker=0;
// when we dont find an item
var NOT_FOUND="ikke funnet"
 
//--------------------------------
// initiate everything
 
/* walk menu recursively*/
function prepareList(list,level,markerval){
    for(var i=0;i < list.length;i++){
        if(list[i].nodeName=="DIV"){
            //mark as menuitem and with correct level
            list[i].setAttribute("class","dynmenuitem dynlevel"+level);
            list[i].setAttribute(MARKER,markerval);
            // children
            prepareList(list[i].childNodes,level+1,markerval+1);
            markerval=""+(parseInt(markerval)+1);
        }
    }
}
function setUp(){
    var menu=document.getElementById(MENU);
    console.log("setup",menu.length);
    // get direct children
    var mark="1";
    var l=menu.childNodes;
    var level=1;
    prepareList(l,level,mark)
    var items=    document.querySelectorAll(".dynmenuitem");
    // show only top level
    for(var i=0;i < items.length;i++){
        if(items[i].getAttribute(MARKER).length==1)
            showItem(items[i]);
        else
            hideItem(items[i]);
        // add eventlistenere for click
        items[i].addEventListener("click", 
                    function(e){MenuSelected(e);}, 
                    false);
    }
}
 
//-----------------------
// hide and show menu items
function hideItem(item){
    item.classList.remove("showme");
    item.classList.add("hideme");
}
function showItem(item){
    item.classList.remove("hideme");
    item.classList.add("showme");
}
 
//-----------------
// focus an menuitem
/* focus on selected when clicked */
function MenuSelected(e){
    var mid=e.target.getAttribute(MARKER);
    focusItem(mid);
}
/* when referenced by id */
function Referenced(id){
    var midelt=document.getElementById(id);;
    if(midelt)
        focusItem(midelt.getAttribute(MARKER));
    else
        fetch(NOT_FOUND+": "+id);
}
 
function focusItem(mid){
    //var mid=e.target.getAttribute(MARKER);
    curMarker=mid;
    var curId=0;
    //console.log("focus: ",id);
    
    var items= document.querySelectorAll(".dynmenuitem");
    // walk and decide visible or not
    for(var i=0;i < items.length;i++){
        // note id
        if(items[i].getAttribute(MARKER) == curMarker)
            curId=items[i].getAttribute("id");
            
        // init as hidden
        hideItem(items[i]);
        var itemM=items[i].getAttribute(MARKER);
        // show top level allways
        if(itemM.length==1)
            showItem(items[i]);
        // show all ancestors
        if(curMarker.startsWith(itemM)){
            showItem(items[i]);
        }
        // and direct children
        if((itemM.startsWith(curMarker))&&(itemM.length ==curMarker.length+1)){
            showItem(items[i]);
        }
        // and siblings
        if((curMarker.length >1)&&(curMarker.length==itemM.length)){
            if(curMarker.substring(0,curMarker.length-1)==itemM.substring(0,itemM.length-1)){
                showItem(items[i]);    
            }
        }
        
        // mark selected
        if(itemM == curMarker)
            items[i].classList.add("dynselected");
        else
            items[i].classList.remove("dynselected");
    }
    // go and get it and show it
    fetch(curId);
}
 
//--------------------
// This is only a display of the id
// typically we would use the id for an ajaxrequest
// accesss to hidden elements on the page
function fetch(id){
    //console.log(id);
    document.getElementById("showmenuid").innerHTML=id;
}

Når siden er lastet gjøres et kall på setUp();

Stilsettet er veldig enkelt og kan med fordel endres:

.dynmenu{min-width:200px}
.dynmenuitem{font-size:14px;color:blue;
  cursor:pointer;line-height:110%;
  padding-bottom: 0px;}
.dynlevel1{margin-left:10px}
.dynlevel2{margin-left:20px}
.dynlevel3{margin-left:30px}
.dynlevel4{margin-left:40px}
/*etc*/
 
.showme{display:block}
.hideme{display:none}
 
.dynselected{color:red;cursor:default}
 
/* testlayout */
.testcontainer{
   display:  flex;
   display: -webkit-flex;
   flex-flow: row;
   -webkit-flex-flow: row;   
   align-items:center;
   -webkit-align-items:center;
    min-height: 150px;
    border-style:solid;border-width:thin;
}
.testcontainer > div{font-size:24px}