"Einschieben" von Unterpunkten in ein Menü

[Rachus]

Hallo!

Wahrscheinlich ist mein Problem banal, aber trotz stundenlangem Suchen, habe ich nur unbefriedigende Lösungsmöglichkeiten gefunden:
Ich möchte gerne eine vertikal angeordnetes Menü machen, bei dem beim Überfahren eines Menüpunktes mit der Maus weitere Unterpunkte eingeblendet werden. Das funktioniert auch ganz gut, nur sieht es nicht schön aus, wenn es nicht animiert ist.

Daher habe ich einfach mal ein bisschen herumprobiert und bin zu folgendem Problem gelangt.

function slide(pix) // Ausgangslage: Ein Element mit 0px Höhe  
{  
	var sub=document.getElementById("submenu");  
	sub.style.height=pix+"px";  
	if (pix<100) window.setTimeout(function(){slide(++pix);}, 30);  
}  
slide(0)

Damit schiebe ich zwar Untermenü ein, allerdings hat es danach die (in der if-Bedingung festgelegte) Größe von 100px. Das Ganze habe ich auch schon mit %-Angaben versucht, allerdings ohne Erfolg. Daher meine Frage: Wie schaffe ich es, dass das Submenü solange größer wird, bis es die Größe erreicht hat, die es hätte, wenn es einfach nur ohne Beeinflussung dargestellt wird?

Hoffentlich konnte ich mich verständlich machen, sodass ihr mir helfen könnt.

Schönen Abend!

Rachus

[ichbinich]

Hallo,

function slide(pix) // Ausgangslage: Ein Element mit 0px Höhe

{
var sub=document.getElementById("submenu");
sub.style.height=pix+"px";
if (pix<100) window.setTimeout(function(){slide(++pix);}, 30);
}
slide(0)

>   
> Damit schiebe ich zwar Untermenü ein, allerdings hat es danach die (in der if-Bedingung festgelegte) Größe von 100px.  
  
Völlig richtig, da die Funktion bei 100(px) abbricht. Was solltest du also ändern, wenn das Untermenu eine andere Größe haben soll? Richtig - also vor dem ersten Aufruf der Funktion die Höhe des Elementes ermitteln und dann bei diesem Wert stoppen.  
  
vg ichbinich  

-- 
Kleiner Tipp:  
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...

[Rachus]

Hallo,

Völlig richtig, da die Funktion bei 100(px) abbricht. Was solltest du also ändern, wenn das Untermenu eine andere Größe haben soll? Richtig - also vor dem ersten Aufruf der Funktion die Höhe des Elementes ermitteln und dann bei diesem Wert stoppen.

Darauf bin ich auch gekommen. Allerdings hoffte ich, dass es noch eine andere Möglichkeit gibt, da ich das Skript eigentlich einfach halten wollte, ohne wissen zu müssen, wie groß das Element werden soll.

Wie es aber scheint, gibt es keine andere Möglichkeit, sodass ich doch vorher die Höhe in Erfahrung bringen muss.

Danke für deine Bemühungen.

Rachus

[MudGuard]

Hi,

Wie es aber scheint, gibt es keine andere Möglichkeit, sodass ich doch vorher die Höhe in Erfahrung bringen muss.

Für moderne Browser könnte man es mit transform:scale probieren (ggf. mit den browserspezifischen Varianten -moz-transform: usw.)

cu,
Andreas

[Rachus]

Hallo,

Für moderne Browser könnte man es mit transform:scale probieren (ggf. mit den browserspezifischen Varianten -moz-transform: usw.)

das ist ja mal interessant! Damit kann man bestimmt viele  schöne Sachen anstellen! Leider war es bei meinen Tests so, dass trotz skaliertem Inhalt die vom Element eingenommene Höhe gleich blieb (Firefox 3.6.6). Da mein Vorhaben aber auch auf älteren Browser funktionieren sollte, kann ich es damit sowieso nicht machen.

Aber trotzdem danke für den Tipp! Man lernt immer was dazu.

Rachus