Avatar billede tvb Nybegynder
08. august 2002 - 13:14 Der er 9 kommentarer og
2 løsninger

Træstruktur - lidt raffineret.....

Jeg har en træstruktur-menu, som hintzmann engang har lavet:
http://www.tvropa.com/brita/foldud_menu1.html.
Den er vældig god, men jeg har brug for at raffinere den lidt mere.

For det første skal den folde sig sammen på de links der ikke er i brug, har man fx foldet menu1 ud og trykker på trekanten til menu2, så skal menu1 folde sig sammen, samtidigt med at menu2 folder sig ud. Hvordan gør jeg det?

Min side er ikke frameopbygget, hvilket betyder at jeg skal finde ud af at angive hvordan menuen skal være foldet ud. Hvordan gør jeg det?

Desuden ville det ikke gøre noget hvis man kunne styre placeringen af de forskellige niveauer lidt bedre. (Jeg ved ikke om det partout ligger defineret i <li> og <ul> tagsene at de skal forskyde sig med en vis afstand, men hvis det gør, ville det være dejligt, hvis nogen kendte en anden metode til at lave menuen)
Avatar billede nikolajdu Nybegynder
08. august 2002 - 13:53 #1
Hvad med sådan her :

Du styrer afstanden på uundermenuen med : .spacer{ width:20}


<html>
  <head>
 
  <style>
 
  .spacer{ width:20}
 
  </style>
 
    <script language="javascript">
      <!--
   
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

forrige = false;

function vis(id){
if(forrige&&forrige!=id){
var styleObj = (ns4)? document.layers[forrige] : (ie4)? document.all[forrige].style : document.getElementById(forrige).style;
styleObj.display = "none"
saet(forrige,0)
}
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
if(styleObj.display == "none"){
styleObj.display = ""
visible= 1
}else{
styleObj.display = "none"
visible = 0
    }
    saet(id,visible)
    forrige = id;
}
 
    function saet (name, value) {
      var argv = saet.arguments;
      var argc = saet.arguments.length;
      var expires = (argc > 2) ? argv[2] : null;
      var path = (argc > 3) ? argv[3] : null;
      var domain = (argc > 4) ? argv[4] : null;
      var secure = (argc > 5) ? argv[5] : false;
      document.cookie = name + "=" + escape (value) +
        ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
        ((path == null) ? "" : ("; path=" + path)) +
        ((domain == null) ? "" : ("; domain=" + domain)) +
        ((secure == true) ? "; secure" : "");
    }


function hentKage2 (name) {
var cook = document.cookie;
var cookNavn = name + "=";
var laengde = cook.length;

var start = 0;
while (start < laengde) {
var slut = start + cookNavn.length;
if (cook.substring(start, slut) == cookNavn) {
var vend = cook.indexOf (";", slut);
if (vend == -1) vend = laengde;

return unescape(cook.substring(slut, vend));
}

start = cook.indexOf(" ", start) + 1;
if (start== 0) break;
}
return null;
}


      function init(){
antalLag = 3;
if(document.cookie){
for (a=1;a<=antalLag;a++){
tjeck = hentKage2('undermenu'+a)
if(tjeck==1){
vis('undermenu'+a)
            }
        }
    }
}
      -->
      </script>
  </head>

  <body onload="init()">
 
  <a href="#" id="menu1" name="menu1" onClick="vis('undermenu1')" style="cursor:hand;">Vis Menu 1</a>
<br>
      <div id="undermenu1" name="menu1_sub" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.1</a></td>
    </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.2</a></td>
   
        </tr>
</table>
      </div>
    <a href="#" id="menu2" name="menu2" onClick="vis('undermenu2')" style="cursor:hand;">Vis Menu 2</a>
    <br>
      <div id="undermenu2" name="menu2_sub" style="display:none">
      <table border="0">
        <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">2.1</a></td>
        </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">2.2</a></td>
        </tr>
</table>
      </div>

    <a href="#" id="menu3" name="menu3" onClick="vis('undermenu3')" style="cursor:hand;">Vis Menu 3</a>
      <div id="undermenu3" name="menu3_sub" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">3.1</a></td>
        </tr>
</table>
      </div>

  </body>
</html>

/Nikolaj
Avatar billede nikolajdu Nybegynder
08. august 2002 - 14:00 #2
Den jeg fik brygget sammen nu sætter en cookie, der husker hvilken menu du havde foldet ud næste gang du besøger/reloader siden - Det kan vjeg lige fjerne, hvis det er :))

/Nikolaj
Avatar billede nikolajdu Nybegynder
08. august 2002 - 14:01 #3
Så kan det kortes ned til :

<html>
  <head>
 
  <style>
 
  .spacer{ width:20}

 
  </style>
 
    <script language="javascript">
      <!--
   
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

forrige = false;

function vis(id){
if(forrige&&forrige!=id){
var styleObj = (ns4)? document.layers[forrige] : (ie4)? document.all[forrige].style : document.getElementById(forrige).style;
styleObj.display = "none"
}
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
if(styleObj.display == "none"){
styleObj.display = ""
visible= 1
}else{
styleObj.display = "none"
visible = 0
    }
    forrige = id;
}
 

      -->
      </script>
  </head>

  <body>
 
  <a href="#" id="menu1" name="menu1" onClick="vis('undermenu1')" style="cursor:hand;">Vis Menu 1</a>
<br>
      <div id="undermenu1" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.1</a></td>
    </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.2</a></td>
   
        </tr>
</table>
      </div>
    <a href="#" id="menu2" name="menu2" onClick="vis('undermenu2')" style="cursor:hand;">Vis Menu 2</a>
    <br>
      <div id="undermenu2" style="display:none">
      <table border="0">
        <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">2.1</a></td>
        </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">2.2</a></td>
        </tr>
</table>
      </div>

    <a href="#" id="menu3" name="menu3" onClick="vis('undermenu3')" style="cursor:hand;">Vis Menu 3</a>
      <div id="undermenu3" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">3.1</a></td>
        </tr>
</table>
      </div>

  </body>
</html>

/Nikolaj
Avatar billede tvb Nybegynder
08. august 2002 - 14:18 #4
-> Nikolajdu
Nu har jeg ikke gennemstuderet dit forslag endnu, men umiddelbart ser det jo godt ud, menuen beholder ihvertfald sin "udfoldning".
Men er din løsning scallerbar, dvs kan den umiddelbart udvides med 5 niveauer eller 100 for den sags skyld?
Avatar billede nikolajdu Nybegynder
08. august 2002 - 14:22 #5
Du tilføjer bare alle dem du har lyst til og ændrer navnene "menuXXX" til det du gerne vil have (bruger du versionen med cookien, så SKAL de hedde "undermenu9879" - Eller et andet tal.

<a href="#" id="menu9879" onClick="vis('undermenu9879')" style="cursor:hand;">Vis Menu 3</a>
      <div id="undermenu9879" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">9879.1</a></td>
        </tr>
</table>
      </div>
Avatar billede tvb Nybegynder
08. august 2002 - 14:40 #6
Gør jeg noget forkert??? For det virker ikke..... menuen klapper sig bare sammen istedet for at folde sig yderligere ud!


  <body onload="init()">
 
  <a href="#" id="menu1" name="menu1" onClick="vis('undermenu1')" style="cursor:hand;">Vis Menu 1</a>
<br>
      <div id="undermenu1" name="menu1_sub" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.1</a></td>
    </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" id="menu9879" onClick="vis('undermenu9879')" style="cursor:hand;">Vis Menu 3</a>
      <div id="undermenu9879" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">9879.1</a></td>
        </tr>
</table>
      </div></td>
    </tr>
</table>
      </div>
  </body>
Avatar billede tvb Nybegynder
10. august 2002 - 15:48 #7
Eksperten er noget ustabil for tiden... nå jeg forsøger igen!

Det jeg skrev var sådan ca. at Nikolajs meget gode forslag kun næsten har løst mine problemer..... - jeg mangler stadig det med at det skal være en løsning, der ligesom mit udgangspunkt http://www.tvropa.com/brita/foldud_menu1.html kan håndtere et ukendt antal niveauer med et ukendt antal punkter på hver.
Nikolajs forslag kan jeg umiddelbart kun få til at fungere på to niveauer med x antal punkter på hver.... Kan du hjælpe lidt mere specifikt Nikolajdu, eller kan en anden?
Avatar billede nikolajdu Nybegynder
10. august 2002 - 17:21 #8
Som sagt, så tilføjer du bare ale dem du vil have og husker at ændre name/id på dem...

<html>
  <head>
 
  <style>
 
  .spacer{ width:20}

 
  </style>
 
    <script language="javascript">
      <!--
   
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;

forrige = false;

function vis(id){
if(forrige&&forrige!=id){
var styleObj = (ns4)? document.layers[forrige] : (ie4)? document.all[forrige].style : document.getElementById(forrige).style;
styleObj.display = "none"
}
var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
if(styleObj.display == "none"){
styleObj.display = ""
visible= 1
}else{
styleObj.display = "none"
visible = 0
    }
    forrige = id;
}
 

      -->
      </script>
  </head>

  <body>
 
  <a href="#" id="menu1" name="menu1" onClick="vis('undermenu1')" style="cursor:hand;">Vis Menu 1</a>
<br>
      <div id="undermenu1" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.1</a></td>
    </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">1.2</a></td>
   
        </tr>
</table>
      </div>
    <a href="#" id="menu2" name="menu2" onClick="vis('undermenu2')" style="cursor:hand;">Vis Menu 2</a>
    <br>
      <div id="undermenu2" style="display:none">
      <table border="0">
        <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">2.1</a></td>
        </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">2.2</a></td>
        </tr>
</table>
      </div>

    <a href="#" id="menu3" name="menu3" onClick="vis('undermenu3')" style="cursor:hand;">Vis Menu 3</a>
      <div id="undermenu3" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">3.1</a></td>
        </tr>
</table>
      </div>
      <br>
    <a href="#" id="menu4" name="menu4" onClick="vis('undermenu4')" style="cursor:hand;">Vis Menu 4</a>
    <br>
      <div id="undermenu4" style="display:none">
      <table border="0">
        <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">4.1</a></td>
        </tr>
    <tr>
    <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">4.2</a></td>
        </tr>
</table>
      </div>
    <a href="#" id="menu5" name="menu5" onClick="vis('undermenu5')" style="cursor:hand;">Vis Menu 5</a>
      <div id="undermenu5" style="display:none">
      <table border="0">
        <tr>
        <td class="spacer">&nbsp;</td>
    <td><a href="#" target="_blank">5.1</a></td>
        </tr>
</table>
      </div>
  </body>
</html>
Avatar billede tvb Nybegynder
11. august 2002 - 01:43 #9
Nej..... nu er det helt tydeligt, vi misforstår hinanden og jeg må ikke kunne formulere mig ordentligt!
Jeg ønsker ikke eksempler på flere punkter, jeg ønsker et eksempel på flere NIVEAUER, altså at punktet 1.1 har et underpunkt, der måske igen har 4 underpunkter....

Vis Menu 1
  1.1
    1.1.1
      1.1.1.1
      1.1.1.2
      1.1.1.3
      1.1.1.4
  1.2
Vis Menu 2
  2.1
  osv
  osv

- er det tydeligere?
Avatar billede nikolajdu Nybegynder
11. august 2002 - 03:47 #10
aha...
Avatar billede tvb Nybegynder
29. august 2002 - 10:24 #11
Jeg har opgivet at få præcis det svar jeg ledte efter.... Men har besluttet at dele pointene med dig nikolaj fordi du trods alt var så ihærdig i dit forsøg på at hjælpe mig!!!
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