Avatar billede hede98 Nybegynder
13. marts 2006 - 21:45 Der er 6 kommentarer og
1 løsning

Menu der foldes ud

Hej
Jeg har en ny menu på min hjemmeside.
punk1
punk2
punk3
punk4
Nu vil jeg gerne have det sådan at når jeg klikker på punk3
så skal det komme til at se ud som nedenstående:
punk1
punk2
punk3
-punk31
-punk32
punk4
Avatar billede psykochicken Nybegynder
13. marts 2006 - 22:16 #1
Avatar billede hells Nybegynder
14. marts 2006 - 14:12 #2
<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li onclick="this.childNodes[1].style.display=='none'?this.childNodes[1].style.display='block':this.childNodes[1].style.display='none'">Punkt 3
  <ul style="display: none;">
    <li>Punkt 3.1</li>
    <li>Punkt 3.2</li>
  </ul>
  </li>
  <li>Punkt 4</li>
</ul>
Avatar billede hells Nybegynder
14. marts 2006 - 14:18 #3
Det hele kom åbenbart ikke med. Omskrevet:
<li onclick="foldud(this)">Punkt 3
<ul style="display: none;">
  <li>Punkt 3.1</li>
  <li>Punkt 3.2</li>
</ul>
</li>

og i head:
<script type="text/javascript">
function foldud(obj){
if(obj.childNodes[1].style.display=='none')
  obj.childNodes[1].style.display='block';
else
  obj.childNodes[1].style.display='none';
}
</script>
Avatar billede hede98 Nybegynder
14. marts 2006 - 19:58 #4
Hvor skal jeg så indsætte html link under punk 3.1 og 3.2
Avatar billede psykochicken Nybegynder
16. marts 2006 - 09:19 #5
hells >> Så vil undermenuen forsvinde, når du forsøger at klikke på et undermenupunkt.

hede98 >> hvis du kun har ét punkt, der skal have undermenu kunne du lave noget i stil med:
<script type="text/javascript">
function fold(id){
  var a = document.getElementById(id).style;
  a.display = a.display == 'block'? 'none': 'block';
  }
</script>
<a href="#" onclick="fold('sub');return false;">Punkt 3</a><br>
<div id="sub" style="display:none;position:relative;left:10px;margin:5px;">
  <a href="dit_link">Punkt 3.1</a><br>
  <a href="dit_link">Punkt 3.2</a>
</div>

...eller med flere undermenuer, hvor kun én undermenu må være åben kunne det være noget i stil med:
<style type="text/css">
.sub {display:none;position:relative;left:10px;margin:5px;}
</style>
<script type="text/javascript">
function foldud(id){
  var a = document.getElementById(id).style;
  if(a.display == 'block'){
  foldind();
  a.display = 'none';
  }
  else {
  foldind();
  a.display = 'block';
  }
}
function foldind(){
  for(i=1;i<4;i++){
    document.getElementById('sub' + i).style.display = 'none';
  }
}
</script>
<a href="#" onclick="foldud('sub1');return false;">Punkt 1</a><br>
<div id="sub1" class="sub">
  <a href="dit_link">Punkt 1.1</a><br>
  <a href="dit_link">Punkt 1.2</a>
</div>
<a href="#" onclick="foldud('sub2');return false;">Punkt 2</a><br>
<div id="sub2" class="sub">
  <a href="dit_link">Punkt 2.1</a><br>
  <a href="dit_link">Punkt 2.2</a>
</div>
<a href="#" onclick="foldud('sub3');return false;">Punkt 3</a><br>
<div id="sub3" class="sub">
  <a href="dit_link">Punkt 3.1</a><br>
  <a href="dit_link">Punkt 3.2</a>
</div>
<a href="dit_link" onclick="foldind();">Punkt - uden submenu</a><br>

skal det være mere avanceret, så kig evt. på:  http://www.dhtmlcentral.com/script/search.asp?category=menu
eller : http://www.dynamicdrive.com/dynamicindex1/index.html

/psc
Avatar billede hede98 Nybegynder
01. august 2007 - 11:45 #6
psykochicken: Vil du sende et svar...
Avatar billede hede98 Nybegynder
12. marts 2010 - 08:27 #7
lukker
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