Menüebene bei Mouseover öffnen

[PaRkY]

Tachen Leute

ich habe eine neue HP erstellt und möchte nun wie auf usgang.ch ein Menü mit Ebenen erstellen.

Zwei Fragen habe ich hierbei:

1. Wie muss ich die Ebene einstellen, dass sie Pixel genau - bei jeder Auflösung wohlbemerkt - am richten Ort erscheint. (siehe usgang.ch)
2. Wie bringe ich die Ebene dazu, dass sie wieder verschwindet, wenn ich auf eine andere Ebene oder aber einfach weg von diesem Menüpunkt bzw. der Menüebene gehe?

Besten Dank für die Hilfe.

 

[macfreakz]

1. Wie muss ich die Ebene einstellen, dass sie Pixel genau - bei jeder Auflösung wohlbemerkt - am richten Ort erscheint. (siehe usgang.ch)

Mit HTML Element "<div>" und CSS Attribut "position" und "margin"
kannst du die Tabelle pixelgenau anzeigen.

z.B.

<div style="position:absolute; margin-top:20px; display:none;">
    <tabelle/>
</div>

display unterdrückt die Anzeige von diesem Element ohne Platzhalter.
zIndex kontrolliert die Ebenen. Je höher, desto vorderer.

2. Wie bringe ich die Ebene dazu, dass sie wieder verschwindet, wenn ich auf eine andere Ebene oder aber einfach weg von diesem Menüpunkt bzw. der Menüebene gehe?

onmouseover sollst du dem Element hinzufügen. In diesem Attribut stehen die Methoden, die ausgeführt werden, wenn der Maus über dem Element liegt.
onmouseout tut das gegenteil.
Dabei sollst du timeout setzen, damit das Menü nicht gleich (grob) verschwindet, wenn der Maus ausserhalb des Elements ist.

Beim onmouseover sollst du CSS Attribut display den Wert "inline" geben, damit das Div-Element angezeigt wird.

Hoffentlich bringe ich dich weiter ...

 

[PaRkY]

Besten Dank macfreakz... mein Problem ist, dass eine 750px breite Tabelle habe, welche zentriert ist. Jetzt ist 200px von links bei einer Auflösung von 800x600 - so denke ich - nicht 200px bei einer Auflösung von 1024x768. Wie mache ich das nun?

 

[macfreakz]

Wenn das div Element keine Positionsangaben wie left, top, right, bottom enthält, wird es einfach die Position vom letzten Element übernommen. Man kann es mit dem "top-margin" oder wie es heisst die y-position verschieben, ohne dass die top position sich ändert.