Klappmenü

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Klappmenü

    Hallo! Ich will ein Klappmenü mit 3 Ebenen auf meiner Site einbauen. Ich habe folgendes gefunden, diese Scripts müssen allerdings erweitert werden.

    Außerdem weiß ich nicht, welches von den Beiden besser ist.

    1. Script:
    Code:
    <script type="text/javascript">
<!--

function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";

document.getElementById(divid).style.display="inline";

}
//-->
</script>

</head>
<body bgcolor="#FFFFFF">
<a href="#" onclick="show('cat1')">Category 1</a><br>
<div id="cat1" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div><br>
<a href="#" onclick="show('cat2')">Category 2</a><br>
<div id="cat2" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div><br>
    2. Script:
    Code:
    <script type="text/javascript">

if (document.getElementById){ 
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");
		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";
		}
	}
}

//AKtuelle Position nach Reload der Seite merken.....

function MenuInit(){
if (document.location.search.match(/menu=11/)){
SwitchMenu("sub11");
} else if (document.location.search.match(/menu=12/)){
SwitchMenu("sub12");
} else if (document.location.search.match(/menu=13/)){
SwitchMenu("sub13");
} else if (document.location.search.match(/menu=14/)){
SwitchMenu("sub14");
} else if (document.location.search.match(/menu=15/)){
SwitchMenu("sub15");
}
}

window.onload = MenuInit;  

</script>

<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub11')">Link1</div>
<span class="submenu" id="sub11">
<a href="index.php?id=123&menu=11">Art.-Nr. 063</a></div>
<a href="index.php?id=145&menu=11">Art.-Nr. 123</a></div>
<a href="index.php?id=198&menu=11">Art.-Nr. 456</a></div>
 </span>
</div>
    - Kann man die Scripte so erweitern, dass sie 3 Ebenen haben?
    - Kann das 1. Script sich genau wie beim 2. nach einem Reload der Seite die Position merken? Mittels übergabe eines Links (Beispiel: &menu=11)
    - Welches Script ist besser?
    Stichworte: -
  • #2
    1. ja

    2. ja, ich ziehe die serverseitige Lösung vor, d.h. du weist per PHP die aktuelle position einer geeignete CSS-Klasse zu und somit ist die aktuelle Position nach dem Reload eindeutig, denn das Menü sollte bei Abschaltung von JS auch noch voll funktionsfähig sein.

    3. in meinem Augen ist Script 1 schlanker, aber die Funktion show sollte verbessert werden

    Kommentar

    • #3
      Kannst du mir vielleicht Tipps geben, wie ich das lösen kann?

      Ich hab nicht viel Ahnung von Javasript.
      Wie kann ich mir eine 3. Ebene zum Aufklappen programmieren?

      Und wie kann ich die Funktion show verbessern?

      Wie kann ich denn mit PHP eine CSS Klasse ansprechen?

      Kommentar

      • #4
        wenn du nicht viel Ahnung von JS hast, dann verschiebe ich mal nach Projekthilfe

        Kommentar

        • #5
          Ich habe mich jetzt für das erste entschieden. Was mir jetzt noch fehlt, ist die 3. Ebene zum aufklappen. WIe kann ich das lösen?

          Code:
          <script type="text/javascript">
<!--
function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";
document.getElementById(divid).style.display="inline";
}

function MenuInit(){
if (document.location.search.match(/menu=1/)){show("cat1");
} else if (document.location.search.match(/menu=2/)){show("cat2");
} else if (document.location.search.match(/menu=3/)){show("cat3");
} else if (document.location.search.match(/menu=4/)){show("cat4");
} else if (document.location.search.match(/menu=5/)){show("car5");
}}
window.onload = MenuInit;  
//-->
</script>

<img src="images/dot.gif" align="absmiddle" style="margin-right:5px;"><a href="#" onclick="show('cat1')">Category1</a><br>
<div id="cat1" style="display:none">
<a href="index.php?id=07&lang=<?php echo $lang; ?>&menu=1" class="sub">Art.-Nr. 07</a><br>
<a href="index.php?id=07&lang=<?php echo $lang; ?>&menu=1" class="sub">Art.-Nr. 07</a><br>
<a href="index.php?id=07&lang=<?php echo $lang; ?>&menu=1" class="sub">Art.-Nr. 07</a><br>
</div><br>

<img src="images/dot.gif" align="absmiddle" style="margin-right:5px;"><a href="#" onclick="show('cat2')">Category 2</a><br>
<div id="cat2" style="display:none">
<a href="index.php?id=07&lang=<?php echo $lang; ?>&menu=2" class="sub">Art.-Nr. 07</a><br>
<a href="index.php?id=07&lang=<?php echo $lang; ?>&menu=2" class="sub">Art.-Nr. 07</a><br>
<a href="index.php?id=07&lang=<?php echo $lang; ?>&menu=2" class="sub">Art.-Nr. 07</a><br>
</div><br>

          Kommentar

          Vorherige template Weiter
          Lädt...
          X