Menu: Untermenupunkte nicht sichtbar

[Marc Nilius]

Hallo!

Mal wieder ein kleines Problem: Ich habe ein Menu (horizontal) mit mehreren Menupunkten als Liste implementiert, etwa so:

<div id="menu">
<ul>
  <li><a href="#">Punkt 1</a></li>
  <li><a href="#">Punkt 2</a></li>
  ...
</ul>
</div>

Soweit gar kein Problem. Nun moechte ich unter jeden dieser Menupunkte noch Untermenupunkte einfuegen, die allerdings erst eingeblendet werden, wenn man auf den Hauptmenupunkt klickt.
Das sieht dann so aus:

<div id="menu">
<ul>
  <li><a href="#" onclick="showsubmenu(1); return true;">Punkt1</a></li>
    <ul id="submenu1" class="submenu">
      <li>test1</li>
      <li>test1b</li>
    </ul>
  <li><a href="#" onclick="showsubmenu(2); return true;">Punkt2</a></li>
    <ul id="submenu2" class="submenu">
      <li>test2</li>
    </ul>
  ...
</ul>
</div>

Die kleine JS-Funktion greift sich halt immer das entsprechende Element via ID und setzt die Visibility auf "visible" bzw. wieder zurueck auf "hidden".

Das funktioniert alles soweit wunderbar. Problem: Wenn ein Untermenupunkt nicht dargestelt wird, wird trotzdem der Platz im Menu dafuer vorgehalten. Das ist ziemlich bloed. Ich haette gerne, dass erst wenn ein Untermenupunkt eingeblendet wird, der Platz verbraucht wird und damit alle weiteren dahinterstehenden Hauptmenupunkte einfach nach unten rutschen.

Wie kann ich das realisieren? Was muss ich aendern?

Vielen Dank schonmal und viele Gruesse,
Marc

[Ingo Turski]

Hi,

<ul>
  <li><a href="#" onclick="showsubmenu(1); return true;">Punkt1</a></li>
    <ul id="submenu1" class="submenu">

Diese Verschachtelung ist nicht zulässig.

<li><a href="#" onclick="showsubmenu(2); return true;">Punkt2</a></li>

warum nicht this?

<ul id="submenu2" class="submenu">

wozu die ID und Klasse? Du kennst Nachfahren-Selektoren?

Die kleine JS-Funktion greift sich halt immer das entsprechende Element via ID und setzt die Visibility auf "visible" bzw. wieder zurueck auf "hidden".

visible belegt den Anzeigeplatz.

Wenn ein Untermenupunkt nicht dargestelt wird, wird trotzdem der Platz im Menu dafuer vorgehalten. Das ist ziemlich bloed. Ich haette gerne, dass erst wenn ein Untermenupunkt eingeblendet wird, der Platz verbraucht wird und damit alle weiteren dahinterstehenden Hauptmenupunkte einfach nach unten rutschen.

Du kennst die möglichen Werte für display?

freundliche Grüße
Ingo

[Marc Nilius]

Hi!

Also eigentlich mag ich solche kurz gehaltenen (zumindest vordergruendig fast aussagelosen) Antworten ja nicht, aber hier muss ich mal sagen: Danke fuer die Hilfe! :-)

<ul>
  <li><a href="#" onclick="showsubmenu(1); return true;">Punkt1</a></li>
    <ul id="submenu1" class="submenu">
Diese Verschachtelung ist nicht zulässig.

Stimmt. Ist beseitigt.

<li><a href="#" onclick="showsubmenu(2); return true;">Punkt2</a></li>
warum nicht this?

weil ich das zu kompliziert fand fuer den DOM-Baum. Habs jetzt aber mit "nextSibling" anstatt mit "getElementByID" gemacht. So klappts dann auch mit this.

<ul id="submenu2" class="submenu">
wozu die ID und Klasse? Du kennst Nachfahren-Selektoren?

Die ID war nur zum Ansprechen ueber "getElementById" gut, fiel weg (s.o.). Auch die Klasse hab ich elemeniert. Hatte das via Nachfahren-Selektoren versucht, hatte am Anfang aber nich geklappt, deswegen die Klasse.

Wenn ein Untermenupunkt nicht dargestelt wird, wird trotzdem der Platz im Menu dafuer vorgehalten. Das ist ziemlich bloed. Ich haette gerne, dass erst wenn ein Untermenupunkt eingeblendet wird, der Platz verbraucht wird und damit alle weiteren dahinterstehenden Hauptmenupunkte einfach nach unten rutschen.
Du kennst die möglichen Werte für display?

Ja, jetzt wieder. War mir deutlichst entfallen, dass mit display anstatt mit visibility zu realisieren.

Wie gesagt, nochmal Danke fuer die "Anstoss"-Hilfe, jetzt gehts auf jeden Fall. :-)

Viele Gruesse,
Marc