Navigation per Klick für Untermenüs

[ThomasG]

Hallo,

wer kann mir bitte helfen?
Ich habe hier (siehe weiter unten) ein JavaScript für eine vertikale Navigation, das in unsere Vereinshomepage eingebaut werden soll.
Aktuell ist es so, dass die Untermenüs per "onmouseover" erweitert werden. Meine Vereinskollegen und ich möchten gerne die Menüerweiterng per "Klick". Alle meine Versuche dies zu realiesieren sind bisher gescheitert. Was sollte ich tun, damit diese Klick-Funktion realisiert werden kann?
Außerdem hat dieses Script einen Fehler, den ich noch nicht lösen konnte. Wenn man diese HTML-aufruft sind alle Submenüs die sich in der Navigation befinden erweitert. Mein Wunsch wäre es, dass beim Aufruf der HTML-Seite, alle Submenüs ausgeblendet sind. Wo könnte hier der Fehler liegen?

Besten Dank im voraus!

Gruß
Thomas

JavaScript:

var menuids=new Array("navi") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}

if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

HTML:

<ul id="navi" class="menu">
<li><a href="menuitem1.html">MenuItem 1</a></li>
<li><a href="menuitem2.html">MenuItem 2</a>
    <ul>
    <li><a href="submenu1.html">SubMenu 1</a></li>
    <li><a href="submenu2.html">SubMenu 2</a>
    </ul>
</li>
<li><a href="menuitem3.html">MenuItem 3</a></li>
<li><a href="menuitem4.html">MenuItem 4</a></li>
</ul>

[johny7]

Moin allerseits,

Ich habe hier (siehe weiter unten) ein JavaScript für eine vertikale Navigation, das in unsere Vereinshomepage eingebaut werden soll.
Aktuell ist es so, dass die Untermenüs per "onmouseover" erweitert werden. Meine Vereinskollegen und ich möchten gerne die Menüerweiterng per "Klick". Alle meine Versuche dies zu realiesieren sind bisher gescheitert. Was sollte ich tun, damit diese Klick-Funktion realisiert werden kann?

Im Moment wird das Submenü ausgeklappt, wenn die Maus über den Eintrag fährt und wieder eingeklappt, wenn die Maus den Eintrag verlässt. Wie soll das beim Klicken sein? Beim Klick aufklappen und beim verlassen der Maus ausklappen? In dem Fall musst du einfach die folgende Zeile ersetzen:

  
ultags[t].parentNode.onmouseover=function(){  

durch

  
ultags[t].parentNode.onklick=function(){  

Außerdem hat dieses Script einen Fehler, den ich noch nicht lösen konnte. Wenn man diese HTML-aufruft sind alle Submenüs die sich in der Navigation befinden erweitert. Mein Wunsch wäre es, dass beim Aufruf der HTML-Seite, alle Submenüs ausgeblendet sind. Wo könnte hier der Fehler liegen?

Installiere dir die Erweiterung Firebug im Firefox. Damit kannst du ziemlich genau analysieren, was passiert, wenn du die Seite aufrufst.

Grüße, JN

[Steel]

Hola amigos!

ultags[t].parentNode.onklick=function(){

  
Wenn JS Deutsch waere, wuerde das vielleicht gehen... onclick  
  
Der gezeigte Code enthaelt kein CSS. Die Standardeigenschaft der Elemente ist nunmal, sichtbar zu sein. Es fehlt also das CSS um die Unterelemente nicht darzustellen.  

-- 
Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.

[johny7]

Moin allerseits,

Hola amigos!

ultags[t].parentNode.onklick=function(){

>   
> Wenn JS Deutsch waere, wuerde das vielleicht gehen... onclick  

Achja, natürlich...  
  

> Der gezeigte Code enthaelt kein CSS. Die Standardeigenschaft der Elemente ist nunmal, sichtbar zu sein. Es fehlt also das CSS um die Unterelemente nicht darzustellen.  

Habe ich auch schon vermutet. Ich habe mich nur dadurch irreführen lassen, dass per JS Elemente kreiert werden. Da wird aber wohl doch nur ein Pfeil vorgesetzt...  
  
Grüße, JN

-- 
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)  
http://www.johny7.de

[Steel]

Moin allerseits,

Hola amigos!

ultags[t].parentNode.onklick=function(){

> >   
> > Wenn JS Deutsch waere, wuerde das vielleicht gehen... onclick  
> Achja, natürlich...  
>   
> > Der gezeigte Code enthaelt kein CSS. Die Standardeigenschaft der Elemente ist nunmal, sichtbar zu sein. Es fehlt also das CSS um die Unterelemente nicht darzustellen.  
> Habe ich auch schon vermutet. Ich habe mich nur dadurch irreführen lassen, dass per JS Elemente kreiert werden. Da wird aber wohl doch nur ein Pfeil vorgesetzt...  
  
Mit dem JS liesse sich sicher auch was anstellen und das CSS der Elemente manipulieren. Ist vielleicht sogar guenstiger, fuer den Fall, dass kein JS benutzt wird. Dann stuende das Menue immerhin komplett zur Verfuegung, da es dann icht versteckt wuerde.  

-- 
Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.

[ThomasG]

Moin allerseits,

Hola amigos!

ultags[t].parentNode.onklick=function(){

> > >   
> > > Wenn JS Deutsch waere, wuerde das vielleicht gehen... onclick  
> > Achja, natürlich...  
> >   
> > > Der gezeigte Code enthaelt kein CSS. Die Standardeigenschaft der Elemente ist nunmal, sichtbar zu sein. Es fehlt also das CSS um die Unterelemente nicht darzustellen.  
> > Habe ich auch schon vermutet. Ich habe mich nur dadurch irreführen lassen, dass per JS Elemente kreiert werden. Da wird aber wohl doch nur ein Pfeil vorgesetzt...  
>   
> Mit dem JS liesse sich sicher auch was anstellen und das CSS der Elemente manipulieren. Ist vielleicht sogar guenstiger, fuer den Fall, dass kein JS benutzt wird. Dann stuende das Menue immerhin komplett zur Verfuegung, da es dann icht versteckt wuerde.  
>   
  
Hallo,  
  
hier habe jetzt noch den CSS-Bereich beigefügt, den ich zuvor vergessen habe.  
  
Gruß  
Thomas  
  
  
CSS:  
  
ul.menu {  
   background-color: transparent;  
   position: relative;  
   top: -1px;  
   left: 0;  
   }  
  
ul.menu li {  
   background-color: transparent;  
   padding: 0;  
   margin: 0;  
   list-style: none;  
   width: 192px;  
   top: -1px;  
   left: 1px;  
   }  
  
ul.menu ul {  
   background-color: transparent;  
   padding: 0;  
   margin: 0;  
   }  
  
ul.menu a {  
   font: bold 1.2em sans-serif;  
   text-decoration: none;  
   display: block;  
   padding: 30px 5px;  
   margin: 1px 0 0;  
   width: 192px;  
   border-radius: 5px;  
   -moz-border-radius: 5px;  
   }  
  
ul.menu a:link, ul.menu a:visited {  
   color: #e0d0b0;  
   background-color: #004e80;  
   padding: 3px 4px;  
   border: 1px solid #0af;  
   }  
  
ul.menu a:hover, ul.menu a:focus {  
   color: #ffedcd;  
   background-color: #804e00;  
   padding: 3px 4px;  
   border: 1px solid #fa0;  
   }  
  
ul.menu a:link span, ul.menu a:visited span {  
   display: none;  
   }  
  
ul.menu a:hover span, ul.menu a:focus span {  
   font-size: 1.5em;  
   line-height: 1.5em;  
   color: #804e00;  
   padding: 0.5em;  
   margin: 0 0 0 192px;  
   height: 1em;  
   width: 660px;  
   display: block;  
   position: absolute;  
   top: -7px;  
   left: -7px;  
   }  
  
ul.menu ul a {  
   display: block;  
   font: bold 1.15em sans-serif;  
   text-decoration: none;  
   padding-left: 15px;  
   text-indent: 15px;  
   }