nicht angemeldet
Hallo,
kann mir hier bitte jemand weiterhelfen bei der Realisierung eines vertikalen Menüs mit JavaScript. Ich bin noch relativer Anfänger in Sachen JavaScript und deshalb habe ich mich mit einem Code aus dem Internet bedient.
Der nachfolgende Code ist genau das, was ich mir vorgestellt habe. Denn ich möchte, das beim Klick auf einen Menüpunkt die Untermenüpunkte angezeigt werden. Wenn nun auf einen anderen Menüpunkt geklickt wird soll hier wie zuvor die Untermenüpunkte sichtbar sein und das zuvor geöffnete Menü soll automatisch wieder schließen. Um meine HP zu realisieren muss ich an dem Code 2 Änderungen vornehmen, die ich leider nicht hinbekomme.
1. möchte ich die Menüpunte Item1 bis Item5 zu jeweils einer HTML-Seite verlinken
2. würde ich gerne noch teilweise eine weitere Unterveschachtelung haben wollen unter den Menüpunkten Seite1 bis Seite3 mit Links zu HTML-Seiten.
Ich wäre sehr dankbar für Lösungsvorschläge zu meinem Anliegen oder muss ich hierfür meine Menüstruktur komplett anders aufbauen.
Besten Dank im vorraus
Thomas Gellenbeck
<html>
<head>
<title>aufklappmenue</title>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0em;
}
.submenulink{
margin-bottom: 1px;
background-color:#ECECAA;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
</style>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1",
id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) { var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
</head>
<body>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Item1</div>
<span class="submenu" id="sub1">
<a class="submenulink" href="#">Seite1</a><br>
<a class="submenulink" href="#">Seite2</a><br>
<a class="submenulink" href="#">Seite3</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">Item2</div>
<span class="submenu" id="sub2">
<a class="submenulink" href="#">Seite1</a><br>
<a class="submenulink" href="#">Seite2</a><br>
<a class="submenulink" href="#">Seite3</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Item3</div>
<span class="submenu" id="sub3">
<a class="submenulink" href="#">Seite1</a><br>
<a class="submenulink" href="#">Seite2</a><br>
<a class="submenulink" href="#">Seite3</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Item4</div>
<span class="submenu" id="sub4">
<a class="submenulink" href="#">Seite1</a><br>
<a class="submenulink" href="#">Seite2</a><br>
<a class="submenulink" href="#">Seite3</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub5')">Item5</div>
<span class="submenu" id="sub5">
<a class="submenulink" href="#">Seite1</a><br>
<a class="submenulink" href="#">Seite2</a><br>
<a class="submenulink" href="#">Seite3</a><br>
</span>
</div>
</body>
</html>