Lösung gesucht! Höhe eines CSS-Menü

[absyss]

hallo,

WORUM GEHTS:
wie kann ich die Höhe eines CSS-Menüs ermitteln (geschachtelte Divs)

WAS IST DAS PROBLEM:
alle Submenüpunkte sind über "display:none" ausgeblendet und werden selbst nach einblendung (display:block) im Javascript ignoriert.

WIE SIEHTS AUS:

[MENU-CONTAINER]
  + [Main 1]
    + [Sub 1]
    + [Sub 2]
    + ...
  + [Main 2]
    ...
  + [Main 3]
    ...

es mag vielleicht trivial klingen, mit Javascript die Höhe des Menü-Containers auszuleden, aber mit "display:none" wird die Höhe immer gleich ausgegeben (ca. 200px) selbst wenn alle Unterpunkte ausgeklappt sind, bleibt die Höhe gleich.

Das ganze muss Crossbrowser kompatibel sein.
HAT JEMAND EINE IDEE?

bin echt am verzweifeln hier...

lg,
Martin

[daniel84]

Hallo Martin,

du könntest ja alle Main- und Sub-Elemente durchgehen, bei jedem prüfen, ob display auf block steht und wenn ja, die entsprechende Höhe addieren.

Ungetesteter (Pseudo)code:

x = 0
for (i=0;i<=document.getElementsByTagName("li").length;i++)
{
  if (document.getElementsByTagName("li")[i].style.display == "block")
  {
    x += document.getElementsByTagName("li")[i].offsetHeight;
  }
}
alert("Höhe aller eingeblendeten Elemente: " + x + "px");

Gruss aus Luzern,
Daniel

[absyss]

hm, das hatte ich vermutet, wird wohl das beste sein ich mach es so...

vielen Dank :)
M.E.