Avatar billede freesite Nybegynder
25. juli 2005 - 06:32 Der er 7 kommentarer og
2 løsninger

xpandmenu automatisk

Hej eksperter ville lige høre om der er nogle som kan hjælpe med følgende problem.

Jeg vil gerne lave en menu som denne her
http://www.tobi-systeme.de/navigation.php

havde forestillet mig det skulle gøres ud fra et array[][] som jeg genererer ved hjælp af php ud fra indholdet af en mappe på serveren.

havde forestiillet mig noget i stil med dette her

<html>
    <head>


</head>
<body>



<script>

var quote= new Array()
quote[0,0]="Odensevej 1";
quote[0,1]="odensevej 2";
quote[0,2]="odensevej 3";
quote[1,0]="nyborgvej 1";
quote[1,1]="nyborgvej 2";



function xMenu2(){
    if(document.getElementById('xChild2').style.display=='none'){document.getElementById('xChild2').style.display='block';}else{document.getElementById('xChild2').style.display='none';}
    }

for (i=0;i<qoute.length;i++){
vej=qoute[i,0];

document.write('<div style="width:150px;"><div id="parentX" onclick="xMenu2();"><b>'+vej+'</b></div><div id="xChild2" style="display:none;"><div id="childX">&nbsp;&nbsp;&nbsp;&nbsp;<a href="new/help.htm" target="_self">new/help.htm</a></div></div></div>');

}
</script>
</body>
</html>

Men kan ikke rigtigt gøre det færdigt.
håbe der er nogle som kan hjælpe
Avatar billede jzip Nybegynder
25. juli 2005 - 09:32 #1
Hej freesite

Jeg har ændret din kode en smule, der var noget galt med din definition af array'et, du har også brugt "block" i stedet for "inline" jeg er ikke sikker, men jeg tror "inline" er bedre :-) Nå men jeg håber du kan bruge den tilrettede kode.

<html>
<head>

<script type="text/javascript">

var quote = new Array()
quote[0] = new Array();
quote[0][0] ="Odensevej 1";
quote[0][1]="odensevej 2";
quote[0][2]="odensevej 3";
quote[1] = new Array();
quote[1][0]="nyborgvej 1";
quote[1][1]="nyborgvej 2";

function xMenu2(id){
        if(document.getElementById(id).style.display=='none'){
        document.getElementById(id).style.display='inline';
    }   
        else{
        document.getElementById(id).style.display='none';
    }
}

function init()    {
    var menuDiv = document.getElementById("menu");
    var vej = "";
    var tempArray = null;
    for(var i=0;i<quote.length;i++){
        tempArray = quote[i];
        for(var j=0;j<tempArray.length;j++)    {       
            vej = tempArray[j];
            menuDiv.innerHTML += "<div id=\"parent_"+i+"_"+j+"\" onclick=\"xMenu2('xChild_"+i+"_"+j+"');\"><b>"+vej+"</b></div>";
            menuDiv.innerHTML += "<div id=\"xChild_"+i+"_"+j+"\" style=\"display:none;\">&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"new/help.htm\" target=\"_self\">new/help.htm</a></div>";
        }
    }
}

</script>

</head>
<body onload="init();">

<div id="menu"></div>

</body>
</html>

Mvh
jZip.
Avatar billede roenving Novice
25. juli 2005 - 14:22 #2
Hvorfor skulle inline være bedre end block, når du divs naturlige måde at opføre sig på er at være block-level-tags ?-)

-- og så er freesites ønsker med garanti ikke opfyldt, når der for hver eneste option er både en parent og en child, det skal nok være en parent for hvor gruppe, og så et antal childs inde i ...

-- men udfra freesites oplæg og dit forsøg fik jeg bikset denne sammen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/634686">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#menu{width:120px;}
#menu div{background-color:#789;cursor:pointer;color:white;font-weight:900;}
#menu div div{background-color:#abc;display:none;}
#menu div div a:link,#menu div div a:visited{font-weight:400;color:black;text-decoration:none;}
#menu div div a:hover,#menu div div a:active{font-weight:900;text-decoration:underline overline;}
</style>

<script type="text/javascript">

var quote = new Array()
quote[0] = new Array();
quote[0][0] ="Odensevej 1";
quote[0][1]="odensevej 2";
quote[0][2]="odensevej 3";
quote[1] = new Array();
quote[1][0]="nyborgvej 1";
quote[1][1]="nyborgvej 2";

function visSkjul(elm){
  var st = elm.getElementsByTagName('div')[0].style;
  var actState = st.display;
  var num = 0;
  while(document.getElementById("menu_" + num)){
    document.getElementById("menu_" + num).style.display = 'none';
    num++;
  }
  st.display = actState!='block' ? 'block' : 'none';
}

window.onload = function(){
  var menuDiv = document.getElementById("menu"),newPar,newDiv,newLink,newTxt,newLine;
  newLine = document.createElement('br');
  for(var i=0;quote.length>i;i++){
    newPar = document.createElement('div');
    newPar.id = "oMenu" + i;
    newTxt = document.createTextNode(quote[i][0].split(" ")[0]);//hvor kommer teksten til overdiven ?-)
    newPar.appendChild(newTxt);
    menuDiv.appendChild(newPar);
    newPar.onclick = function(){visSkjul(this);};
    newDiv = document.createElement('div');
    newDiv.id = "menu_" + i;
    for(var j=0;quote[i].length>j;j++){
      newLink = document.createElement('a');
      newLink.href = "java script:alert('Click på link " + j + " i menu " + i +"');";//hvor kommer links fra ?-)
      newLink.onclick = function(){event.cancelBubble = true;};
      newTxt = document.createTextNode(quote[i][j]);
      newLink.appendChild(newTxt);
      newDiv.appendChild(newLink);
      newDiv.appendChild(newLine.cloneNode(true));
    }
    newPar.appendChild(newDiv);
  }
}

</script>
<title>Dynamisk menu simpel</title>
</head>
<body>

<div id="menu"></div>

</body>
</html>

-- den skulle så også kunne tåle at blive brugt i xhtml strict-dokumenter, så den er en anelse fremtidsikret ...

-- som det fremgår af et par af kommentarerne mangler der dog nogle væsentlige ting, nemlig overskrift til menupunkter og link (og måske target !-), som klik på punkterne skal reagere med !o]
Avatar billede freesite Nybegynder
25. juli 2005 - 21:02 #3
takker mange gange for hjælpen lige hvad jeg havde brug for kan jeg få jer til at smide et svar.
lige en sidste ting findes der ikke en funktion som i php hvor man kan trække et tegn ud af en streng
fx.
Nyborgvej_12/ skal være Nyborgvej 12
fx (php -> strpos(streng,'_')    )
Avatar billede roenving Novice
25. juli 2005 - 21:06 #4
F.eks.

txt = "Nyborgvej_12";
nyTxt = txt.replace(/_/g," ");//eller vend den rundt ved at bytte rundt på mellemrum og underscore !-)
alert(nyTxt);
Avatar billede roenving Novice
25. juli 2005 - 21:06 #5
Hov ...

Velbekomme '-)
Avatar billede freesite Nybegynder
25. juli 2005 - 22:59 #6
Lige e
Avatar billede roenving Novice
26. juli 2005 - 01:44 #7
?-)

-- og bemærk, at du for at udlevere point skal markere etnavn i boksen til venstre før du trykker på Acceptér !-)
Avatar billede roenving Novice
26. juli 2005 - 02:02 #8
... et eller flere navne ...
Avatar billede roenving Novice
26. august 2005 - 13:51 #9
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester