nicht angemeldet
Popup Effekt
Gunnar BittersmannHi.
Wie kann man einen Popup Effekt erstellen, wie er auf der Seite http://www.amazon.com/ ist, wenn man mit der Maus über das Feld „See All 32 Product Categories“ fährt?
Danke im Voraus.
-
Hallo Markus,
Ich musste genau dieses Problem neulich loesen und im IE war das nicht ganz so trivial, wie es aussieht.
Am Ende habe ich so gemacht:
-
zwischen <body> und </body> einen div-container, ich gebe ihm mal die ID 'main', der auf position:relative gesetzt wird.
-
anschliessend dein kompletter Quellcode fuer die Seite
-
ganz am Ende folgt ein div-Container, sagen wir 'all-products', mit der Auflistung aller Produkte, der per CSS auf
#all-products {
position:absolute;
left:wert bezogen auf main
top: wert bezogen auf main
display:none
}
gesetzt wird -
auf den Button 'Show all products' legst du ein Javascript, das auf onmousover oder onclick den den Contaier 'all-products' auf display:block umschaltet;
Wichtig ist, dass 'all-products' ganz am Schluss des Quelltextes steht. Inerhalb meines Quelltextes gab es zahlreiche absolute und relative Positionierungen. Anfangs hatte ich 'all-products' im Quelltext unmittelbar hinter dem Button notiert, was den IE etwas aus dem Takt gebracht hat. Ob das beim Verzicht auf Positionierung auch der Fall gewesen waere, kann ich nicht sagen.
Gruß,
Dieter
-
-
Hello out there!
Hi.
Wie kann man einen Popup Effekt erstellen,Mit JavaScript: SELFHTML: [ref:self811/dhtml/beispiele/navigation.htm@title=Dynamische Navigationsleiste]. Dabei muss man immer auch eine JavaScript-freie Alternative anbieten!
Besser: Lösung mit CSS: http://gunnarbittersmann.de/2006/menu.html (Das funktioniert in dieser Form nicht mit IEs, da ich den Kindselektor verwendet habe. Wenn es unter der Ebene der Hauptpunkte nur eine weitere Ebene gibt, tut es der Nachfahrenselektor aber auch und den verstehen sogar IEs.)
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hello out there!
[ref:self811/dhtml/beispiele/navigation.htm@title=Dynamische Navigationsleiste].
/ → ;
<http://de.selfhtml.org/dhtml/beispiele/navigation.htm@title=Dynamische Navigationsleiste>
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Hi,
Wenn es unter der Ebene der Hauptpunkte nur eine weitere Ebene gibt, tut es der Nachfahrenselektor aber auch und den verstehen sogar IEs.)
Du vergißt, daß der IE :hover nur auf Links anwenden kann.
freundliche Grüße
Ingo-
Hello out there!
Du vergißt, daß der IE :hover nur auf Links anwenden kann.
Stimmt. Da das Menü so eh nicht im IE funktioniert, habe ich li:hover verwendet. Das sollte man aber auch in a:hover umschreiben können.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hi,
habe ich li:hover verwendet. Das sollte man aber auch in a:hover umschreiben können.
nicht, wenn wie im amazon-Beispiel Links enhalten sein sollen.
freundliche Grüße
Ingo
-
-
-