✔ Multi Level Menü

Sprint · 16. Oktober 2008

Hallo,
ich bin auf der Suche nach einem 3-stufigen Aufklappmenü, das nur untereinander auflistet. Aussehen soll es so wie hier das "Applet Menu" auf der linken Seite. Beispiel
D.h., man kann aus einem Hauptpunkt bis zu zwei Unterebenen aufklappen, wählt man einen anderen Punkt, wird das bisherige zugeklappt. In dem Beispiel wird allerdings mit verschiedenen html Seiten gearbeitet, das ich aber nicht verwenden kann, da das Menü immer live per PHP aus einer Datenbank generiert wird. Ich habe bis jetzt ein 2-stufiges Munü im Einsatz, das sich aber scheinbar nicht auf eine weitete Ebene umbauen läßt. (Zumindest habe ich das mit meinen rudimentären Javascript Kenntnissen nicht hinbekommen)

Code:

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span");
		if(el.style.display != "block"){
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu")
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

....

<div onclick="SwitchMenu('sub1')"><a href="#">Hauptpunkt</a></div>
	<span class="submenu" id="sub1">
		&nbsp;&nbsp;&nbsp;<a href="u1.php">Unterpunkt 1</a><br>
		&nbsp;&nbsp;&nbsp;<a href="u2.php">Unterpunkt 2</a><br>
	</span>

Wenn jemand eine Idee hat, wie man das vorhandene Menü erweitern kann oder ein Script kennt, das entsprechend umgebaut werden kann, wäre das toll. Perfekt wäre es, wenn es auch für einen nicht gebürtigen Javasriptler so verständlich ist, daß ich es zerlegen und dann per PHP generieren kann.
Im Voraus schon mal herzlichen Dank.

Maik · 16. Oktober 2008

Hi,

die Ausrichtung des folgenden Menüs mal außer Acht gelassen, da dies nur eine Frage der CSS-Formatierung ist, dürfte Stu Nicholls' JS-Code in seinem Demo Click brick dropdown menu deinen Vorstellungen entgegenkommen.

mfg Maik

Sprint · 17. Oktober 2008

Maik hat gesagt.:
Hi,

die Ausrichtung des folgenden Menüs mal außer Acht gelassen, da dies nur eine Frage der CSS-Formatierung ist, dürfte Stu Nicholls' JS-Code in seinem Demo Click brick dropdown menu deinen Vorstellungen entgegenkommen.

mfg Maik

Ja und nein. Vom Prinzip her ist das schon so, aber auch hier bewegt man sich in zwei Richtungen. Es sollte aber vom Layout her eher wie eine Baumdarstellung sein, wobei aber nicht alles einzeln auf- und zugeklappt werden muß, sondern das Öffnen des einen Punktes das Schließen des anderen bewirkt. Ich habe da noch ein anderes Beispiel, das genau so ist wie ich das suche. Nur muß da noch eine weitere Ebene dazu. Beispiel 2

Maik · 17. Oktober 2008

Dann starten wir mal diesen Testballon

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Sprint</title>

<script type="text/javascript">
<!--
var maincat = new Array();
maincat[0] = 'cat1';
maincat[1] = 'cat2';

var subcat = new Array();
subcat[0] = 'cat1_1';
subcat[1] = 'cat2_1';

function showmain(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }
                for(i=0;i<subcat.length;i++)
                {
                        document.getElementById(subcat[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}

function showsub(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<subcat.length;i++)
                {
                        document.getElementById(subcat[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
//-->
</script>

</head>
<body>

<ul>
    <li><a href="#" onclick="showmain('cat1')">Topmenü 1</a>
           <ul id="cat1" style="display:none">
               <li><a href="#" onclick="showsub('cat1_1')">Submenü 1</a>
                      <ul id="cat1_1" style="display:none">
                          <li><a href="#">Sublink 1.1</a></li>
                          <li><a href="#">Sublink 1.2</a></li>
                      </ul>
               </li>
           </ul>
    </li>
    <li><a href="#" onclick="showmain('cat2')">Topmenü 2</a>
           <ul id="cat2" style="display:none">
               <li><a href="#" onclick="showsub('cat2_1')">Submenü 2</a>
                      <ul id="cat2_1" style="display:none">
                          <li><a href="#">Sublink 2.1</a></li>
                          <li><a href="#">Sublink 2.2</a></li>
                      </ul>
               </li>
           </ul>
    </li>
</ul>

</body>
</html>

mfg Maik

Sprint · 17. Oktober 2008

Perfekt, genau das, was ich gesucht habe. Meinen herzlichsten Dank dafür.

dashboardlight · 28. Juni 2011

Hallo, das script ist genau das was ich auch suche.

Jedoch, sobald ich einen Menüpunkt hinzufüge funktioniert es nicht mehr einwandfrei:
Manchmal werden nichtaktive Menüpunkte ausgeblendet (soll-Zustand) manchmal bleiben sie sichtbar.

Hier der Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Sprint</title>
 
<script type="text/javascript">
<!--
var maincat = new Array();
maincat[0] = 'cat1';
maincat[0] = 'cat2';
maincat[0] = 'cat3';
 
var subcat = new Array();
subcat[1] = 'cat1_1';
subcat[0] = 'cat1_2';
subcat[0] = 'cat2_1';
subcat[0] = 'cat3_1'; 
function showmain(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }
                for(i=0;i<subcat.length;i++)
                {
                        document.getElementById(subcat[i]).style.display="none";
                }
 
                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
 
function showsub(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<subcat.length;i++)
                {
                        document.getElementById(subcat[i]).style.display="none";
                }
 
                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
//-->
</script>
 
</head>
<body>
 
<ul>
    <li><a href="#" onclick="showmain('cat1')">Topmenü 1</a>
           <ul id="cat1" style="display:none">
               <li><a href="#" onclick="showsub('cat1_1')">Submenü 1</a>
                      <ul id="cat1_1" style="display:none">
                          <li><a href="#">Sublink 1.1</a></li>
                          <li><a href="#">Sublink 1.2</a></li>
                      </ul>
               </li>
               <li><a href="#" onclick="showsub('cat1_2')">Submenü 2</a>
                      <ul id="cat1_2" style="display:none">
                          <li><a href="#">Sublink 1.1</a></li>
                          <li><a href="#">Sublink 1.2</a></li>
                      </ul>
               </li>
           </ul>
    </li>
    <li><a href="#" onclick="showmain('cat2')">Topmenü 2</a>
           <ul id="cat2" style="display:none">
               <li><a href="#" onclick="showsub('cat2_1')">Submenü 2</a>
                      <ul id="cat2_1" style="display:none">
                          <li><a href="#">Sublink 2.1</a></li>
                          <li><a href="#">Sublink 2.2</a></li>
                      </ul>
               </li>
           </ul>
    </li>
    <li><a href="#" onclick="showmain('cat3')">Topmenü 3</a>
           <ul id="cat3" style="display:none">
               <li><a href="#" onclick="showsub('cat3_1')">Submenü 1</a>
                      <ul id="cat3_1" style="display:none">
                          <li><a href="#">Sublink 1.1</a></li>
                          <li><a href="#">Sublink 1.2</a></li>
                      </ul>
               </li>
           </ul>
    </li>
</ul>
 
</body>
</html>

viele Grüße und herzlichen Dank im Vorraus für einen Tipp

Sprint · 29. Juni 2011

Am Anfang müssen die maincat und subcat alle EINDEUTIG definiert werden. Du initialisierst in deinem Script immer nur maincat[0], d.h. es wird erst durch "cat_1" und dann durch "cat_2" überschrieben. Gleiches gilt für die subcats. Alle müssen eine eindeutige Nummer haben.
Es werden die Elemente später zwar mit namen angesprochen, aber in einem Array muß jedes Element eine eigene Nummer haben. (Eine Straße, in der alle Häuser die selbe Hausnummer haben, funktioniert ja auch nicht)

✔ Multi Level Menü

Sprint

Erfahrenes Mitglied

Maik

Sprint

Erfahrenes Mitglied

Maik

Sprint

Erfahrenes Mitglied

dashboardlight

Grünschnabel

Sprint

Erfahrenes Mitglied

Neue Beiträge