nicht angemeldet
Vertikales Menü mit JavaScript
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>
-
Hallo TGellenbeck,
http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
ich würde Dir empfehlen das Beispiel auf Selfhtml anzuschauen.
Grüße, Armin
-
Hallo TGellenbeck,
sorry, Du wolltest ja ein vertikales Menü...
Grüße, Armin
-
sorry, Du wolltest ja ein vertikales Menü...
Am HTML-Code ändert das aber nichts. Siehe z.B. Listamatic
-
-
-
Hi,
kann mir hier bitte jemand weiterhelfen bei der Realisierung eines vertikalen Menüs mit JavaScript.
Moderne Browser können sowas ohne Javascript, lediglich IE6 braucht da etwas Support. Hier ein kleines Beispiel für eine Css-Navi.
Gruesse, Joachim
--
Am Ende wird alles gut. -
Mahlzeit Thomas Gellenbeck,
* Switch Menu script- by Martial B of http://getElementById.com/
Das "neueste" Skript von dort datiert von 2006 ... bist Du *sicher*, dass Du derart veraltete Tools einsetzen willst?
<!-- 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>Dein Menü möchte ganz dringend eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste sein!
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
[latex]Mae govannen![/latex]
<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>Dein Menü möchte ganz dringend eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste sein!
Eigentlich ist es egal.
Da bei _jedem_ Link nur der Seitenanfang angesprungen wird, ist man eh beim zweiten erfolglosen Klick wieder weg :)Cü,
Kai
--
Hard to believe that anyone would use Prototype.js at this
point. It was a bad idea in 2006 and it hasn't gotten any better with age. (David Mark)
Foren-Stylesheet Site Selfzeugs
SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
-
-
Mahlzeit Thomas Gellenbeck,
folgendes wollte ich Dir auf Dein Doppelposting zu diesem Thread antworten - allerdings wurde der Beitrag mittlerweile gesperrt, so dass ich meine Antwort nun hier unterbringe.
BTW: Siehst Du dadurch ein, wie sinnlos und nervend Doppelpostings sind?
- sollte beim anklicken eines Sub der Verzeichnisbaum nicht ausgeblendet werden.
Wird er das denn?
- sollte beim öffnen des Verzeichnisbaums mit Unterverzeichnissen (Main 22) diese nicht eingeblendet sein, sondern erst eingeblendet werden, wenn dort angeklickt wird.
Du holst Dir in Deiner Funktion mShow() *alle* <li>, die sich unterhalb des angeklickten <li> befinden. Du müsstest Dich auf die <li> beschränken, die sich in einem <ul> *direkt* eine Hierarchieebene unterhalb des angeklickten <li> befinden - keine Enkel, Urenkel oder sonstige Nachkommen!
- sollte bei geöffnetem Verzeichnisbaum dieser ausgeblendet werden, wenn ein anderer Hauptmenüpunkt (Main) angeklickt wird.
Dann ruf doch einfach am Anfang der Funktion mShow() einfach die Funktion hideSub() auf - die sollte doch alle Unterpunkte aller Menüpunkte "schließen" (wenn ich sie richtig verstanden habe)?
- sollte jeder Hauptmenüpunkt (Main 1, 2, 22) mit einem Link zu einer HTML-Seite versehen werden, mit a href ist dies nicht möglich.
Warum nicht? Du könntest z.B. alle Menüpunkte (d.h. <li>-Elemente), die direkt auf eine andere Seite verweisen sollen, mit einem Link ausstatten. Dieser Link bekommt ein "href"-Attribut, das auf die gewünschte Zielseite verweist, und ein "onclick"-Attribut, das mittels eines Funktionsaufrufs folgende Prüfung bewirkt:
-
Wenn der Menüpunkt keine Unterpunkte besitzt, gibt die Funktion true zurück, d.h. dem Link wird gefolgt.
-
Wenn der Menüpunkt Unterpunkte besitzt und diese nicht eingeblendet sind, werden sie eingeblendet und die Funktion gibt false zurück, d.h. dem Link wird nicht gefolgt.
-
Wenn der Menüpunkt Unterpunkte besitze und diese bereits eingeblendet sind, gibt die Funktion true zurück, d.h. dem Link wird gefolgt.
<html>
<head>Es fehlt die Angabe eines http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyps.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Wenn Du sowieso gerade beim (Neu-)Aufbau der Seiten bist, verwende doch sinnvollerweise von Anfang an UTF-8.
<style type="text/css" media="screen">
<!--Es ist nicht sinnvoll, CSS mittels HTML-Kommentaren auszublenden.
<script type="text/javascript">
<!--Es ist auch nicht sinnvoll, Javascript mittels HTML-Kommentaren auszublenden.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|