Hilfe bei Java script

[Ernie]

Hi,

ich hab ein menu auf meiner seite gamacht, das auch so ganz gut funktioniert. jetzt wollte ich aber im java script noch eine function ( function auto() ) machen das die menu punkte gleich bei laden der seite geschlossen werden.

Kann mir einer sagen wie ich das machen kann.

Danke

Ernie

---------Javascript------------------
function mini() {
 var LI = document.getElementById("Nav").firstChild;
    do {
  if (sucheUL(LI.firstChild)) {
        LI.onclick=change;
  }
  LI = LI.nextSibling;
    }
    while(LI);
}

function sucheUL(UL) {
 do {
  if(UL) UL = UL.nextSibling;
  if(UL && UL.nodeName == "UL") return UL;
 }
 while(UL);
    return false;
}

function change(){
 if (sucheUL(this.firstChild).style.display=="none"){
   sucheUL(this.firstChild).style.display="";
   LI.style.listStyleImage="url(pics/nav/pfeil_o.gif)";
 }
 else{
   sucheUL(this.firstChild).style.display="none";
   LI.style.listStyleImage="url(pics/nav/pfeil.gif)";
 }
}

function auto(){

}

----------------css----------------

ul#Nav {
    margin: 0;
 padding: 0;
 font-size:12px;
 padding-left: 20px;
}

ul#Nav a:link, ul#Nav a:visited {
 color:#000000;
 text-decoration:none;
}

ul#Nav a:hover, ul#Nav a:active {
 color:#000000;
 text-decoration:none;
}

ul#Nav li {
 list-style: none;
    margin: 0; padding: 0;
 list-style-image:url(../../kiel-neu-neu/index_datein/pics/nav/pfeil.gif);
 list-style-position:outside;
 cursor:pointer;
}

ul#Nav li ul {
 font-size: 11px;
 margin: 0;
 padding: 0;
 padding-left: 8px;
 position:relative;
}

/*ul#Nav li:hover ul {
 display:block;
}*/

ul#Nav li ul a:link, ul#Nav li ul a:visited {
 color:#000000;
 text-decoration:none;
}

ul#Nav li ul a:hover, ul#Nav li ul a:active {
 color:#000000;
 text-decoration:underline;

}

ul#Nav li ul li {
 list-style-image:url(../../kiel-neu-neu/index_datein/pics/nav/punkt.gif)!important;
 list-style-position:outside !important;
    margin: 0;
 padding: 0;
}

------------------html-----------------

<ul id="Nav">
                      <li>Sch&uuml;ler
                        <ul>
                          <li><a href="../schueler/ausland/start.htm" target="haupt">Ausland</a></li>
                          <li><a href="../schueler/schuelze/start.htm" target="haupt">Sch&uuml;lerzeitung</a></li>
                          <li><a href="../schueler/vsfs/start.htm" target="haupt">Von Sch&uuml;ler f&uuml;r Sch&uuml;ler</a></li>
        <li><a href="../schueler/sv/start.htm" target="haupt">Sch&uuml;lervertretung</a></li>
                          <li><a href="../schueler/junior/start.htm" target="haupt">Junior</a></li>
                          <li><a href="../schnell/klauspl/start.htm" target="haupt">Klausurenplan</a></li>
                          <li><a href="../schueler/ehemalig/start.htm" target="haupt">Ehemalige</a></li>
                          <li><a href="../schnell/ags/start.htm" target="haupt">AGs </a></li>
                        </ul>
                      </li>
                       .
                       .
                       .
                  </ul>

[Ike]

Hm warum stellst du die entsprechenden Elemente nicht im CSS auf "display: none;"? Das wäre ja dann quasi der default-Wert, der beim Laden der Seite zutreffen würde und den du dann über dein script veränderst!

Eine Funktion brauchst du dann nicht mehr...

Hi,

ich hab ein menu auf meiner seite gamacht, das auch so ganz gut funktioniert. jetzt wollte ich aber im java script noch eine function ( function auto() ) machen das die menu punkte gleich bei laden der seite geschlossen werden.

Kann mir einer sagen wie ich das machen kann.

Danke

Ernie

---------Javascript------------------
function mini() {
var LI = document.getElementById("Nav").firstChild;
    do {
  if (sucheUL(LI.firstChild)) {
        LI.onclick=change;
  }
  LI = LI.nextSibling;
    }
    while(LI);
}

function sucheUL(UL) {
do {
  if(UL) UL = UL.nextSibling;
  if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
    return false;
}

function change(){
if (sucheUL(this.firstChild).style.display=="none"){
   sucheUL(this.firstChild).style.display="";
   LI.style.listStyleImage="url(pics/nav/pfeil_o.gif)";
}
else{
   sucheUL(this.firstChild).style.display="none";
   LI.style.listStyleImage="url(pics/nav/pfeil.gif)";
}
}

function auto(){

}

----------------css----------------

ul#Nav {
    margin: 0;
padding: 0;
font-size:12px;
padding-left: 20px;
}

ul#Nav a:link, ul#Nav a:visited {
color:#000000;
text-decoration:none;
}

ul#Nav a:hover, ul#Nav a:active {
color:#000000;
text-decoration:none;
}

ul#Nav li {
list-style: none;
    margin: 0; padding: 0;
list-style-image:url(../../kiel-neu-neu/index_datein/pics/nav/pfeil.gif);
list-style-position:outside;
cursor:pointer;
}

ul#Nav li ul {
font-size: 11px;
margin: 0;
padding: 0;
padding-left: 8px;
position:relative;
}

/*ul#Nav li:hover ul {
display:block;
}*/

ul#Nav li ul a:link, ul#Nav li ul a:visited {
color:#000000;
text-decoration:none;
}

ul#Nav li ul a:hover, ul#Nav li ul a:active {
color:#000000;
text-decoration:underline;

}

ul#Nav li ul li {
list-style-image:url(../../kiel-neu-neu/index_datein/pics/nav/punkt.gif)!important;
list-style-position:outside !important;
    margin: 0;
padding: 0;
}

////----- SCHNIPP ----///

[derletztekick]

Hallo Ike,

warum stellst du die entsprechenden Elemente nicht im CSS auf "display: none;"?

Weil dann bei User, die JS deaktiviert haben, nichts zum navigieren wäre.

Kein TOFU bitte.

Mit freundlichem Gruß
Micha

[Ike]

Ok sorry... wusste gar nicht dass es dafür ein "Fachbegriff" gibt... TOFU... hehe und ich hab gedacht, das wär dieser greislige Sojaschmarrn... ;-)

[derletztekick]

Hallo Ernie,

Du holst Dir nachdem Laden der Seite die UL's der ID Navi mit getElement(s)By und lässt diese in einer Schleife den gewünschten Style zukommen:

  
function auto(){  
 var uul = document.getElementById("Nav").getElementsByTagName("ul");  
 for (var i=0; i<uul.length; i++)  
  uul[i].style.display = "none";  
}

Mit freundlichem Gruß
Micha

[Ernie]

Danke Micha hat super funktioniert.

MFG

Ernie

[Ernie]

Hi,

also sweit ist ja alles ganz gut jetzt hab ich fest gestellt dass das java script den menu punkt nicht nur schließt wenn man darauf klickt sondern auchw enn man eine link im unter menu anklickt.
wie kann ich das lösen???

MFG

Ernie

[derletztekick]

Hallo Ernie,

wie kann ich das lösen???

Quick & Dirty aber als Anregung vll hilfreich:

  
  <script type="text/javascript">  
  
  function show(liObj) {  
  
   for (var i=0; i<li_main.length; i++){  
    if (li_main[i] == liObj)  
     for (var j=0; j<li_main[i].sub.length; j++){  
      li_main[i].sub[j].style.display = "";  
     }  
    else  
     for (var j=0; j<li_main[i].sub.length; j++){  
      li_main[i].sub[j].style.display = "none";  
     }  
   }  
  }  
  
  function auto(){  
   root = document.getElementById("Nav");  
   li_main = new Array();  
   var uul = new Array();  
   var k=0;  
   for (var i=0; i<root.childNodes.length; i++){  
    if (root.childNodes[i].nodeType == 1){  
     li_main.push(root.childNodes[i]);  
     li_main[li_main.length-1].onclick = function() { show(this); };  
     uul[k] = new Array();  
     uul[k] = li_main[li_main.length-1].getElementsByTagName("ul");  
     uul[k][uul[k].length-1].style.display = "none";  
     li_main[li_main.length-1].sub = uul[k];  
     k++;  
    }  
   }  
  }  
  var root = null;  
  var li_main = null;  
  
  window.onload = function(){ auto(); };  
  
  </script>

für eine solche Konstruktion:

  
<ul id="Nav">  
 <li>Sch&uuml;ler1  
  <ul>  
   <li><a target="haupt" href="#">Ausland1</a></li>  
   <li><a target="haupt" href="#">Ausland2</a></li>  
   <li><a target="haupt" href="#">Ausland3</a></li>  
  </ul>  
 </li>  
 <li>Sch&uuml;ler2  
  <ul>  
   <li><a target="haupt" href="#">Ausland1</a></li>  
   <li><a target="haupt" href="#">Ausland2</a></li>  
   <li><a target="haupt" href="#">Ausland3</a></li>  
   <li><a target="haupt" href="#">Ausland4</a></li>  
  </ul>  
 </li>  
</ul>

Mit freundlichem Gruß
Micha