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=" "
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>