Avatar billede thb Nybegynder
02. januar 2005 - 13:53 Der er 5 kommentarer og
1 løsning

Menu tree struktur

Hej alle,

Jeg er ved at lave en menu med åben/luk funktion.
Jeg har lavet PHP delen, hvor den vælger hvilke sider der skal vælges og udskriver dem i den rigtige rækkefølge osv..
Men nu vil jeg gerne have hjælpe til js funktion og opsætning af denne.

Man skal kunne åbne/lukke de forskellige side, men du skal også kunne trykke på et link og så skal hele træet åbne/lukke..

Håber at I forstår.

Thomas
Avatar billede Slawomir Seniormester
02. januar 2005 - 13:57 #1
Hej

håber at du kan bruge dette ;-)


<style type="text/css">
.menupunkt{font-family:tahoma,verdana,arial,sans-serif;cursor:pointer;color:#c00000;background:#ffffff;font-weight:800;font-size:10px;width:130px;}
.menu{display:none;padding-left:15px;}
.menu a{text-decoration:none;}
.menu a:link{color: #000000;}
.menu a:visited{color: #000000;}
.menu a:hover{color: #c00000}
.menu a:active{color: #c00000}

</style>
<script language="javascript" type="text/javascript">
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('DIV');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id){
      divs[i].style.display='none';
      document.getElementById('o'+divs[i].id+'pic').src = "plus.png";
    }
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
  document.getElementById(d.id+'pic').src = (st.display=='block')?"minus.png":"plus.png";
}
</script>
</head>
<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img id="omenu1pic" src="../AAAAAAAAAA/plus.png" height="10" width="10">
Svømning
  <div id="menu1" class="menu" onclick="event.cancelBubble=true" style="width: 130; height: 46">
    <a href="#" onclick="return false;">Svømmestadion</a><br>
    <a href="#" onclick="return false;">Frydelund</a><br>
    <a href="#" onclick="return false;">Søndervangen</a><br>
    <a href="#" onclick="return false;">GellerupBadet</a><br>
    <a href="#" onclick="return false;">Marselisborg</a><br>
    <a href="#" onclick="return false;">Handicapsvømning</a><br>
    <a href="#" onclick="return false;">Oplysninger</a><br>
    <a href="#" onclick="return false;">Kontigent</a>&nbsp;
    <a href="#" onclick="return false;"><br>
    Tilmelding</a>
  </div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">
<img id="omenu2pic" src="../AAAAAAAAAA/plus.png" height="10" width="10">
Punkt 2
  <div id="menu2" class="menu" onclick="event.cancelBubble=true" style="width: 130; height: 46">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">
<img id="omenu3pic" src="../AAAAAAAAAA/plus.png" height="10" width="10">
Punkt 3
  <div id="menu3" class="menu" onclick="event.cancelBubble=true" style="width: 130; height: 46">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">
<img id="omenu4pic" src="../AAAAAAAAAA/plus.png" height="10" width="10">
Punkt 4
  <div id="menu4" class="menu" onclick="event.cancelBubble=true" style="width: 130; height: 46">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">
<img id="omenu5pic" src="../AAAAAAAAAA/plus.png" height="10" width="10">
Punkt 5
  <div id="menu5" class="menu" onclick="event.cancelBubble=true" style="width: 130; height: 46">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu6" class="menupunkt" onclick="showMenu(this);">
<img id="omenu6pic" src="../AAAAAAAAAA/plus.png" height="10" width="10">
Punkt 6
  <div id="menu6" class="menu" onclick="event.cancelBubble=true" style="width: 130; height: 46">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
Avatar billede thb Nybegynder
02. januar 2005 - 14:05 #2
Den vil ikke rigtig virke når der er divs i mit design...

Thomas
Avatar billede thb Nybegynder
02. januar 2005 - 14:07 #3
Men jeg vil da lige prøve at rette den lidt til :D

Thomas
Avatar billede Slettet bruger
02. januar 2005 - 14:34 #4
Avatar billede thb Nybegynder
02. januar 2005 - 15:27 #5
el_barto > Det er super... :D Normalt er jeg ikke meget for at bruge andre kode, men det er mega cool det her, så lad gå denne gang :D Smid lige et svar..

Thomas
Avatar billede Slettet bruger
02. januar 2005 - 17:42 #6
oki :)

Der er jo ingen grund til at opfinde den dybe tallerken igen, når nu dette virker glimrende ;)
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