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
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
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> <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>
02. januar 2005 - 14:05
#2
Den vil ikke rigtig virke når der er divs i mit design... Thomas
02. januar 2005 - 14:07
#3
Men jeg vil da lige prøve at rette den lidt til :D Thomas
Slettet bruger
02. januar 2005 - 14:34
#4
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
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 ;)
Vi tilbyder markedets bedste kurser inden for webudvikling