Nico: onclick statt hover bei eiem dynamischen Menüs

Beitrag lesen

So KeYara,

eigentlich ist das ja nicht die Idee von SELFHTML. Aber ich poste dir jetzt mal eine fertige Lösung:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta name="author" content="KeYa">
<script type="text/javascript">
function menue(identifier) {
 var element = document.getElementById(identifier);
 if (element.style.display == "block") {
  element.style.display = "none";
 } else {
  element.style.display = "block";
 }
}
</script>
<style type="text/css">
#a, #c { display: none; }
</style>
</head>
<body>
<ul>
 <li><a href="test.html" onclick="menue('a');return false;">1</a>
 <ul id="a">
  <li>1a</li>
  <li>1b</li>
  <li>1c</li>
  <li>1d</li>
  <li>1e</li>
 </ul></li>
 <li><a href="andereSeite1.html">3</a></li>
 <li><a href="test.html" onclick="menue('c');return false;">3</a>
 <ul id="c">
  <li>3a</li>
  <li>3b</li>
  <li>3c</li>
 </ul></li>
 <li><a href="andereSeite2.html">4</a></li>
</ul>
</body>
</html>

Dann noch ein paar Kommentare zu deinem Code:

<script type="text/javascript">
    function menue(block) {
           document.getElementById("a").style.display = block;
    }
</script>

Das, was hinter dem Funktionsnamen in Klammern steht, ist eine Variable, die den Übergabewert enthält. Wenn Du die Funktion mit menue('Herrje') aufrufst, dann bekommt die Variable block (so hast du sie genannt) den Wert Herrje zugeschrieben. Oben benutze ich diesen Teil der Funktion, um die ID des Elements zu übergeben, das von der Funktion bearbeitet werden soll. Was du gecodet hast, ist so nicht nötig. Man kann eine Funktion durchaus aufrufen, ohne ihr Werte zu übergeben. Die Funktion, die du gecodet hast, ist zwar korrekt. Aber sie würde einfacher ohne Übergabewert funktionieren.

<ul><a href="javascript:menue('block')">1</a>
       <dl id="a" style="display:none">
        <dt>a</dt>
<dt>b</dt>
<dt>c</dt>
<dt>d</dt>
<dt>e</dt>
       </dl>
</ul>

Das ist kein valides HTML:
1. Du hast die <li> Kind-Elemente der <ul> vergessen.
2. Noch einmal: Ist das wirklich eine Definitionsliste? Wenn das ein Navigationsmenü sein soll, dann verwende *nicht* <dl> und <dt>. Das wäre semantisch falsch. <dl> und <dt> verwendet man für Defitinionslisten (Glossarlisten).

<dl id="a" style="display:none">

Das style="display:none" betreffend: Du solltest dir gleich am Anfang angewöhnen, CSS-Anweisungen auszulagern. Ich habe das im Lösungsbeispiel nur der Übersichtlichkeit halber im Kopf der Datei eingebunden.

<ul><a href="javascript:menue('block')">1</a>

Ferner solltest du den Link nicht so coden, sondern lieber einen Eventhandler verwenden. Wer Javascript abgeschaltet hat, kann mit diesem Link nichts anfangen. Bestimmt möchtest du hier die Seiten in einem Bereich auflisten. Verlink doch einfach den Bereich und benutze ein onclick-Event, wie ich es gecodet habe. Wer Javascript hat bekommt dann das Menü, denn die Anweisung "return false" blockiert den Link. Wer keins hat, geht direkt auf die Startseite des Bereichs.

So, ich hoffe jetzt ist es dir klar geworden, was ich in den vorherigen Posts meinte.

Viel Spaß beim Weiterbasteln

Nico