Positionierung von Layern in Flyout-Menü

[Haefti]

Hallo!
Ich habe folgendes Problem.
Ich habe ein hierarchisches Menü, bei dem ich eine Kombination aus Flyout- und Baumstruktur verwirklichen möchte. Dabei entsteht das Problem, dass der y-Wert der Flyout-Layers ändert, je nachdem welches Untermenü offen ist. Ich versuche das mal kurz "grafisch" darzustellen.
Der Ausgangszustand:

Menü
Eintrag1
Eintrag2
Eintrag3

Mit onmouseover sollen neben Eintrag1-3 die jeweiligen Untermenüeinträge rechts davon erscheinen.
Wenn ich nun z.B. über Eintrag2 gehe, soll es so aussehen:

Menü
Eintrag1
Eintrag2 Untereintrag1
Eintrag3 Untereintrag2

Wenn ich nun Untereintrag2 anklicke, sollte es so aussehen:

Menü
Eintrag1
Eintrag2
  Untereintrag1
  Untereintrag2 (selektiert)
Eintrag3

Wie oben gesagt, besteht nun das Problem, dass das Flyoutmenü von Eintrag1 immer noch an der selben Stelle erscheinen würde, das von Eintrag3 aber um die ausgeklappten Untereinträge nach unten verschoben werden muss.
Bislang habe ich postition:absolute verwendet und den y-Wert entsprechend addiert. Da das ganze aber in einer generischen Menüklasse verwendet werden soll, möchte ich es gerne "dynamisch" handhaben.
Gibt es u.U. ein Konstrukt, mit dem ich die jeweiligen div-Bereiche mit den Untereinträgen relativ zu den Einträgen der ersten Ebene positionieren kann?

Mein Optimum wäre übrigens, wenn das ganze mit und ohne JS funktioniert, d.h. mit JS bekommt es die oben gewünschte Funktionalität, ohne JS lädt er beim Klick auf einen Eintrag die Seite mit geöffnetem Untermenü. So erreicht der Surfer mit JS, die Unterseite mit einem Klick, der ohne halt mit zwei.

Bin für jeden Tipp dankbar!

Haefti

[wahsaga]

hi,

Bislang habe ich postition:absolute verwendet und den y-Wert entsprechend addiert. Da das ganze aber in einer generischen Menüklasse verwendet werden soll, möchte ich es gerne "dynamisch" handhaben.

warum positionierst du nicht einfach absolute, _in bezug_ auf die position des jeweiligen ober-menüpunktes?

(dazu müssen die untermenüpunkte in den jeweiligen oberpunkt verschachtelt werden, und dieser muss eine vom initialwert static abweichende positionierung haben.)

gruß,
wahsaga

[Haefti]

Hallo!

warum positionierst du nicht einfach absolute, _in bezug_ auf die position des jeweiligen ober-menüpunktes?

(dazu müssen die untermenüpunkte in den jeweiligen oberpunkt verschachtelt werden, und dieser muss eine vom initialwert static abweichende positionierung haben.)

Darf ich blöd fragen, wie man das genauer macht?
Wenn z.B. jeder Oberpunkt in einem eigenen div-Bereich liegt, mit welchem CSS gelingt es mir dann, den div-Bereich eines Unterpunktes relativ/absolut zum Oberpunkt zu positionieren?
Ein kleines Beispiel wäre klasse.
Vielen Dank!

Haefti

[wahsaga]

hi,

Darf ich blöd fragen, wie man das genauer macht?

ausnahmesweise :-)

Wenn z.B. jeder Oberpunkt in einem eigenen div-Bereich liegt, mit welchem CSS gelingt es mir dann, den div-Bereich eines Unterpunktes relativ/absolut zum Oberpunkt zu positionieren?
Ein kleines Beispiel wäre klasse.

<div class="oberpunkt">
  oberpunkt1
  <div class="unterpunkte">
    unterpunkt1<br>
    unterpunkt2
  </div>
</div>

.oberpunkt { position:relative; }
.unterpunkte { position:absolute; top:1em; left:10em; }

mit den werten für top und left musst du natürlich experimentieren.

gruß,
wahsaga