Brauche hilfe beim Menü

[Schascha84]

grüsst euch!

da ich gerade dabei bin, eine neue Homepage zu basteln habe ich eine Frage zum Menü!

Hier die neue Homepage, die sich noch im Aufbau befindet:

Die Bartagame

(ACHTUNG: Homepage ist derzeit für eine Auflösung von 1024x768 gemacht worden! Leider weiss ich nicht, wie ich die Bilder skallieren kann?! Aber das ist jetzt erstmal nebensache!)

so.. und nun zu meinem Problem.. Wenn ich einen Menüpunkt ausfahre, z.B. "Haltung" und klicke dort auf "Ernährung" dann schliesst sich der Menüpunkt wieder! Warum ist das so?


hier mal der Code:

<br><br><br><br><br>

<a href="http://www.repage2.de/member/diebartagame/index.html" target="index"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Zuhause.png" border="0"></a><br>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css"><title>Foldoutmenue Vertical</title>


<style type="text/css" media="screen">
<!--
body
{
	font-family: Verdana, sans-serif;
	font-size: 14px;
	overflow: auto;
	padding: 10px;
	margin: 0px;
}

#menu, #menu ul
{
	padding: 0px;
	margin: 0px;
}

#menu ul li
{
display: none;
}

#menu li
{
	border: 0px solid #fff;
	list-style-type: none;
	font-weight: bold;
	cursor: pointer;
	display: block;
}

#menu a
{
	text-decoration: none;
	font-weight: normal;
	padding-left: 10px;
	display: block;
}
//-->
</style>

<script type="text/javascript">
<!--
function hideSub()
{
	if (!document.getElementsByTagName)
		return;

	var mnu    = document.getElementById('menu');
	var toplis = mnu.getElementsByTagName('li');

	for (var it = 0; it < toplis.length; it++)
	{
		var sublis = toplis[it].getElementsByTagName('li');

		for (var is = 0; is < sublis.length; is++)
			if (sublis[is].style)
				sublis[is].style.display = (toplis[it].className == 'show') ? 'block' : 'none';
	}
}

function mShow(Me)
{
	if (!Me.getElementsByTagName)
		return;

	var mylis = Me.getElementsByTagName('li');

	if (!mylis)
		return;

	for (j = 0; j < mylis.length; j++)
		mylis[j].style.display = (mylis[j].style.display == 'block') ? 'none' : 'block';
}
//-->
</script>



<ul id="menu">
  <li class="show" onclick="mShow(this);"><span style="color: rgb(255, 0, 0);"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Bartagame.png"></span>
    <ul>
      <li><a href="http://www.repage2.de/member/diebartagame/allgemein.html" target="index">Allgemein</a>
      <a href="http://www.repage2.de/member/diebartagame/krankheiten.html" target="index">Krankheiten</a>
      <a href="http://www.repage2.de/member/diebartagame/vordemkauf.html" target="index">Vor dem Kauf</a>
    <br></li></ul>
  </li>

  <li onclick="mShow(this);"><span style="color: rgb(255, 0, 0);"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Haltung.png"></span>
    <ul>
      <li><a href="http://www.repage2.de/member/diebartagame/mindestanforderungen.html" target="index">Mindestanforderungen an die Haltung</a>
      <a href="http://www.repage2.de/member/diebartagame/ernaehrung.html" target="index">Ernährung</a>
      <a href="http://www.repage2.de/member/diebartagame/winterruhe.html" target="index">Winterruhe</a>
      <a href="http://www.repage2.de/member/diebartagame/vergesellschaftung.html" target="index">Vergesellschaftung</a><br><br></li>
    </ul>
  </li>

  <li onclick="mShow(this);"><span style="color: rgb(255, 0, 0);"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Terrarium.png"></span>
    <ul>
      <li><a href="http://www.repage2.de/member/diebartagame/terragroesse.html" target="index">Größe</a>
      <a href="http://www.repage2.de/member/diebartagame/beleuchtung.html" target="index">Beleuchtung</a>
      <a href="http://www.repage2.de/member/diebartagame/bodengrund.html" target="index">Bodengrund</a>
      <a href="http://www.repage2.de/member/diebartagame/einrichtung.html" target="index">Einrichtung</a>
    <br></li></ul>
  </li>

  <li onclick="mShow(this);"><span style="color: rgb(255, 0, 0);"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Bauanleitungen.png"></span>
    <ul>
      <li><a href="http://www.repage2.de/member/diebartagame/wuestenterra.html" target="index">Wüstenterrarium</a>
      <a href="http://www.repage2.de/member/diebartagame/rueckwand.html" target="index">Rückwandbau</a>
      <a href="http://www.repage2.de/member/diebartagame/hoehle.html" target="index">Einfache Höhle</a>
      <a href="http://www.repage2.de/member/diebartagame/wasserschale.html" target="index">Wasserschale</a><br><br></li>
    </ul>
  </li>

<li onclick="mShow(this);"><span style="color: rgb(255, 0, 0);"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Sonstiges.png"></span>
    <ul>
     <li><a href="http://www.repage2.de/member/diebartagame/uebermich.html" target="index">Über mich</a>
      <a href="http://www.repage2.de/member/diebartagame/calzi.html" target="index">Mein Calzifer</a>
      <a href="http://www.repage2.de/member/diebartagame/literatur.html" target="index">Literatur</a>
      <a href="http://www.repage2.de/member/diebartagame/links.html" target="index">Links</a>
      <a href="http://www.repage2.de/member/diebartagame/tieraerzte.html" target="index">Reptilienkund. Tierärzte</a>
      <a href="http://www.repage2.de/hp.php?id=diebartagame&amp;what=guestbook" target="index">Gästebuch</a>
      <a href="http://www.repage2.de/hp.php?id=diebartagame&amp;what=kontaktformular" target="index">Kontakt</a>
      <a href="http://www.repage2.de/member/diebartagame/impressum.html" target="index">Impressum</a><br><br><br><br></li>
    </ul>
  </li>
</ul>

Habe ich etwas vergessen? Hoffe ihr könnt es mir sagen!

Schon mal danke fürs Lesen!


greetz

 

[Schascha84]

weiss es keiner?!

 

[Keita]

Hallo Schascha,

events haben die Eigenheit, daß sie "durchgereicht" werden, u.zw. ausgehend vom Ausgangselement (z.B. Link) bis zum HTML-Element hinauf und wieder zurück zum Ausgangselement.
In Deinem Fall bedeutet das, daß ein Klick auf einen Link nicht nur einen Event für den Link abfeuert, sondern auch bei allen übergeordneten Elementen, zu denen u.a. auch das übergeordnete LI-Element mit dem onclick-Handler "mShow()" gehört. Sobald Du also auf einen ausgeklappten Link klickst, wird zwangsläufig mShow() für die übergeordnete Navigationsebene aufgerufen, weswegen sich der Navigationspunkt wieder schließt.
Abfangen läßt sich das sog. Bubbling (analog zu aufsteigenden Luftbläschen im Wasser), indem man dieses schlicht unterbindet Blöderweise gibt es zwei Ansätze, um Bubbling zu stoppen, die Standard-Version ist die Methode stopPropagation() der Klasse event:

  event.stopPropagation();

Blöderweise kocht Microsoft sein eigenes Süppchen, im IE muß die Eigenschaft cancelBubble des event-Objektes auf true gesetzt werden:

  window.event.cancelBubble = true;

Man kann das ganze in eine Funktion packen, die entsprechend den Fähigkeiten des Browsers eine der beiden Varianten aufruft:

function stopEventPropagation(event)
{
  if (event && event.stopPropagation) {
    event.stopPropagation();
  } else if (window.event) {
    window.event.cancelBubble = true;
  }
}

Jetzt mußt Du nur noch diese Funktion bei einem Klick auf einen Link aufrufen:

<ul id="menu">
  <li class="show" onclick="mShow(this);"><span style="color: rgb(255, 0, 0);"><img src="http://www.repage2.de/memberdata/diebartagame/Button_Bartagame.png"></span>
    <ul>
      <li>
        <a href="http://www.repage2.de/member/diebartagame/allgemein.html" target="index" onclick="stopEventPropagation(event)">*Allgemein</a>
        <a href="http://www.repage2.de/member/diebartagame/krankheiten.html" target="index" onclick="stopEventPropagation(event)">*Krankheiten</a>
        <a href="http://www.repage2.de/member/diebartagame/vordemkauf.html" target="index" onclick="stopEventPropagation(event)">*Vor dem Kauf</a>
      </li>
    </ul>
  </li>
</ul>

greetings, Keita

 

[Schascha84]

grüss dich Keita!

vielen vielen dank!! hat alles super geklappt!!


sooo.. jetzt muss ich nur noch wissen wie ich die bilder skalieren kann.. :-/
aber hab gelesen das das wohl nicht gehen wird, weil firefox und IE da irgendwie probleme haben.. naja..


greetz