Avatar billede kennedk Nybegynder
01. december 2007 - 12:34 Der er 7 kommentarer og
1 løsning

Lave UL med li med flere niveauer

hej eksperter
Jeg sidder og skal lave en UL liste til menu hjemmesie via javascipt,

og den skal få oplysningen en streng, måske et array, hvor er kan laves flere niveauer.

Jeg har set nogle sider hvor de har et slags array med en masse [ og ] måske kan det bruges.

Nogen der har et lille eksempel :)
Avatar billede roenving Novice
01. december 2007 - 13:11 #1
F.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
ul{list-style:inside;}
</style>
<script type="text/javascript">
var menu = [
  ["Hovedmenu", ["punkt1","punkt2","punkt 3"]],
  ["Menu 1", ["Under1","Under2","Under3"]],
  ["Menu 2", ["Under1",[
    "Under2",["Under2under1","Under2under2"]
    ],"Under3"]]
];
window.onload = function(){
  var mainUl = document.createElement("ul");
  document.getElementById("minDiv").appendChild(mainUl);
  for(var i=0,im=menu.length;im>i;i++){
    createUl(mainUl,menu[i]);
  }
}
function createUl(parElm, elm){
  var newElm = document.createElement("li");
  newElm.appendChild(document.createTextNode(elm[0]));
  parElm.appendChild(newElm);
  for(var i=0,im=elm[1].length;im>i;i++){
    var newSub = document.createElement("ul");
    newElm.appendChild(newSub);
    alert(typeof elm[1][i]);
    if(typeof elm[1][i] == "object")
      createUl(newSub,elm[1][i]);
    else{
      var newLi = document.createElement("li");
      newLi.appendChild(document.createTextNode(elm[1][i]));
      newSub.appendChild(newLi);
    }
  }
}
</script>

</head>

<body>

<div id="minDiv">En div-tekst</div>

</body>

</html>

-- bemærk, at den er lavet til dig lige her, og f.eks. også kræver indsættelse af links m.v., så den bliver adskilligt mere omfattende, når den er færdig, arrayet skal jo også indeholde links udover link-tekster, men det kan måske klares ved noget kreativt med dine links !-)
Avatar billede kennedk Nybegynder
01. december 2007 - 13:16 #2
Hvis der nu skulle links i, er det så ikke bare at lave "tekst;http://google.dk", og så dele det op ? :)
Avatar billede roenving Novice
01. december 2007 - 13:20 #3
Det kan laves på flere måder, det er een af dem, jo !-)
Avatar billede kennedk Nybegynder
01. december 2007 - 13:24 #4
Super :)
men nu er jeg ikke den største haj til javascript, så vil du ikke kommenterer det linie for linie?
Avatar billede roenving Novice
01. december 2007 - 13:33 #5
Jeg fandt så også en uhensigtsmæssighed (som mærkværdigvis ikke har noget renderingsmæssig betydning !-), så her er en bedre udgave:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tomt dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
ul{list-style:inside;}
</style>
<script type="text/javascript">
var menu = [
  ["Hovedmenu", ["punkt1","punkt2","punkt 3"]],//et menu-punkt er opbygget af menu-tekst + menu-punkter
  ["Menu 1", ["Under1","Under2","Under3"]],
  ["Menu 2", ["Under1",[
    "Under2",["Under2under1","Under2under2"]
    ],"Under3"]]//Hvis der er underpunkter, er de selv arrays i stedet for tekster
];
window.onload = function(){
  var mainUl = document.createElement("ul");//Lav hoved UL'en
  document.getElementById("minDiv").appendChild(mainUl);
  for(var i=0,im=menu.length;im>i;i++){//For hvert menu-punkt sal der laves et punkt med tilhørende ny ul
    createUl(mainUl,menu[i]);
  }
}
function createUl(parElm, elm){
  //lav og append list-elementet
  var newElm = document.createElement("li");
  newElm.appendChild(document.createTextNode(elm[0]));
  parElm.appendChild(newElm);
  //lav en ny unordered list til menupunkterne
  var newSub = document.createElement("ul");
  newElm.appendChild(newSub);
  for(var i=0,im=elm[1].length;im>i;i++){
    alert(typeof elm[1][i]);
    if(typeof elm[1][i] == "object")//Hvis menupunktets indhold er et array
      createUl(newSub,elm[1][i]);//Sakl der laves et menu-punkt med en ny UL
    else{
      //Hvis menu-punktet er tekst, skal der oprettes et list-element til det
      var newLi = document.createElement("li");
      //Her skal der tilføjes kode, der først deler menupunktets tekst, og så opretter et a-element med link og tekst
      newLi.appendChild(document.createTextNode(elm[1][i]));
      newSub.appendChild(newLi);
    }
  }
}
</script>

</head>

<body>

<div id="minDiv">En div-tekst</div>

</body>

</html>
Avatar billede kennedk Nybegynder
01. december 2007 - 13:36 #6
Jeg takker :) må sidde og lege med det her i dag .
Avatar billede roenving Novice
01. december 2007 - 13:50 #7
Velbekomme '-)

-- og har du flere spørgsmål, stiller du dem bare, men jeg forlader maskinen nu, og kommer nok først tilbage i morgen !-)
Avatar billede roenving Novice
02. december 2007 - 10:52 #8
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