tabellen-menu

staTIX

staTIX

Mitglied
hallo erstmal,
ich habe schon einige threads hier bezüglich der menu variationen gelesen, aber irgendwie nicht das passende gefunden.

ich will ein menu mit Hilfe von einer Tabelle erstellen. Hier sollen nur einzelne Überpunkte sichbar sein. Wie z.B. beim folgenden Bild (mehrere untereinander)
short.gif


wenn ich jetzt mit der Maus draufklicke soll der Menupunkt weitere Punkte anzeigen.
long.gif

Am coolsten wäre natürlich ein scrollen, aber das muss nicht unbedingt sein. Wichtig ist nur, dass die darunterliegenden Überpunkte weiterhin sichbar bleiben und nur weiter nach unten geschoben werden!

Wie könnte ich sowas realisieren, bin leider kein Javascript- Profi :( und erhoffe mir dass mir jemand hier weiterhelfen könnte.

schon mal vorab vielen dank, für anregungen...
 
PHP: 
<script type="text/javascript">
function openmenu( subnum ) {
  if (window.document.getElementById("sub"+subnum).style.display == "none")
    window.document.getElementById("sub"+subnum).style.display = "block"; 

  if (window.document.getElementById("sub"+subnum).style.display == "block")
    window.document.getElementById("sub"+subnum).style.display = "none"; 
}
</script>

...

<a href="" onClick="openmenu(1); return false;">Menüpunkt 1</a>
<div id="sub1" style="display:none;">
Unterpunkt 1
<br>
Unterpunkt 2
<br>
...
</div>
...
 
danke für deine schnell antwort. jetzt habe ich aber folgendes problem, wenn ich den style von dem sub1-div gleich auf block setze seh ich es, ich kann auf das obermenu klicken, dann verschwindet es. und ab jetzt kann ich so oft klicken wie ich will, das sub1-menu erscheint nicht mehr!

habe mal ein alert vor der ersten if-anweisung eingefügt und lasse mir den style.display anzeigen, der ist anfangs richtig auf block, ändert den auf none und dann bleibt der auf none. was kann das sein??

source sieht für mich auch völlig korrekt aus, oder muss man vielleicht einen anderen display-typ nehmen?
 
juhuu, ich habs glaube ich selber gelöst :-)
Code: 
	<script type="text/javascript">
		function openmenu( subnum ) {
			// alert(window.document.getElementById("sub"+subnum).style.display + " -openmenu");
			window.document.getElementById("sub"+subnum).style.display = "block"; 
		}
		function closemenu( subnum ) {
			// alert(window.document.getElementById("sub"+subnum).style.display + " -closemenu");
			window.document.getElementById("sub"+subnum).style.display = "none";
		}
		function showsubmenu( subnum ) {
			// alert(window.document.getElementById("sub"+subnum).style.display + " -showsubmenu");
			window.document.getElementById("sub"+subnum).style.display = "block"; 
		}
	</script>
	...<br/>
	<a href="" onMouseOver="openmenu(1); return false;" onMouseOut="closemenu(1); return false;">Menüpunkt 1</a>
		<div id="sub1" style="display:none;">
			<a href="" onMouseOver="showsubmenu(1); return false;" onMouseOut="closemenu(1); return false;">
				M1 Unterpunkt 1</a><br/>
			<a href="" onMouseOver="showsubmenu(1); return false;" onMouseOut="closemenu(1); return false;">
				M1 Unterpunkt 2</a><br/>
			...
		</div><br/>
	<a href="" onMouseOver="openmenu(2); return false;" onMouseOut="closemenu(2); return false;">Menüpunkt 2</a>
		<div id="sub2" style="display:none;">
			<a href="" onMouseOver="showsubmenu(2); return false;" onMouseOut="closemenu(2); return false;">
				M2 Unterpunkt 1</a><br/>
			<a href="" onMouseOver="showsubmenu(2); return false;" onMouseOut="closemenu(2); return false;">
				M2 Unterpunkt 2</a><br/>
			...
		</div><br/>
	...

jetzt hab ich aber noch eine verständnisfrage, was bewirkt das return false dass du bei den events zurückgibst? und warum an der stelle, könnte ich evtl. das am ende der funktion zurück geben? müsste das gleiche sein oder?
 
Original geschrieben von staTIX

jetzt hab ich aber noch eine verständnisfrage, was bewirkt das return false dass du bei den events zurückgibst? und warum an der stelle, könnte ich evtl. das am ende der funktion zurück geben? müsste das gleiche sein oder?
Zum Vergrößern anklicken....

Ich bezieh mich jetzt auf Nuinmundo:

"Das return false; unterdrückt doch die Navigation zu der im href-Attribut angegebenen Seite"

Ob du das auch innerhalb der Funktion zurückgeben kannst, kann ich dir nicht 100%ig sagen - imo dürfte es keinen unterschied machen - has aber nicht komplett durchdacht :) - einfach mal auf Nuinmundo warten...

bye
 
ja da hast du auch ziemlich sicher recht, denn ich habe mal rumgespielt und es ohne dem return false; probiert und da wird auf die auf die index.htm seite verlinkt (auch wenn nichts drin steht), könnte browser abhängig zu sein.

dann steht das natürlich an der richtigen stelle, denn meine unter menues sollen ja verlinkbar sein.

big thx für das feedback.
 
Das return false; bewirkt in einer vom onClick-Attribut aufgerufenen Funktion nichts, weil ja dann die Funktion das false ja praktisch in den Handler rein schreibt und false ist eben nicht gleich return false;


Dann zu dem Problem, dass die Eigenschaft nicht mehr auf bock zurückgesetzt wird:
Es war ein kleiner Denkfehler von mir: Und zwar wurde direkt nachdem die Eigenschaft auf Block gesetz wurde geprüft, ob sie auf block gestellt ist und dementsprechend wieder auf none zurückgesetzt.

Die Lösung ist etwas einfacher als deine:
Code: 
  if (window.document.getElementById("sub"+subnum).style.display == "none")
    window.document.getElementById("sub"+subnum).style.display = "block";
  else if (window.document.getElementById("sub"+subnum).style.display == "block")
    window.document.getElementById("sub"+subnum).style.display = "none";
 
Um nochmal kurz auf das return false zurück zukommen:

Mir ist gestern Abend noch eingefallen, wie man es per Funktion steuern kann, ob die Navigation zum href-Attribut erfolgt oder nicht:

PHP: 
<script type="text/javascript">

function test( ret_num ) {
  if (ret_num == 1) return_val = true;
  if (ret_num == 0) return_val = false;

  alert(return_val);

  return return_val;
}

</script>

<br>
<br>
<br>
<a href="http://www.tutorials.de" onClick="return test( 1 );">Link 1 (true)</a>
<br>
<a href="http://www.tutorials.de" onClick="return test( 0 );">Link 2 (false)</a>

Man lässt die Funktion ein true oder false zurücksenden, je nach dem, macht aber vor den Funktionsaufruf noch ein return, so dass im onClick-Handler der Wert zurückgegeben wird, den die Funktion zurück gibt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück