CSS Menü lässt den Rest der Seite springen

[smallwall]

Hallo,
hier habe ich ein Menü geschrieben, nur der Rest der Seite springt beim :hover herunter und wieder hoch beim "onmouseout".

http://devphp.de/pgn/menu.php

Wie kann man das hin-und-her-springen verhindern? Der Rest sollte direkt unter dem Menü erscheinen und die Dropdownmenüs sollen den Rest der Seite überdecken.

mfg

 

[Lawnmower]

menuhead muss position:relative haben.
submendrop muss position:absolute sowie top:0 und left:0 haben.

Ausserdem solltest Du die ganze Navi als ul / li Liste machen und nicht als Div Suppe, dann gehören die auch inhaltlich zusammen und ist für Accessibility besser.

 

[smallwall]

Naja das springen ist schonmal weg, nur wird das .submendrop an der falschen Stelle angezeigt.

 

[Lawnmower]

Hmm ja - das HTML ist eben auch falsch aufgebaut, Du musst alle Submenü Einträge zusammenfassen und auf diesen den position:absolute Style anwenden, das geht am besten indem Du eben mit ul / li arbeitest. Jetzt ist positon:absolute auf jeden Submenü Eintrag angewendet. Kannst Dich an dem hier orientieren - da wurde es genauso gemacht wie Du es brauchst: http://swico.ch

 

[smallwall]

Hm, ja habe hier mal angefangen, das ganze umzubauen.

http://devphp.de/pgn/menu2.php

Jetzt muss ich nur noch die Liste nebeneinander anordnen, nicht untereinander.

Aber gutes Beispiel, das schau ich mir mal an, wenn ich Zeit hab.
Edit: oder auch nicht, das Stylesheet ist ein wenig unleserlich im Browser =)

Ergänzung (9. Januar 2016)

Jetzt habe ich nur das Problem, dass die aufzuklappenen Elemente zu weit rechts aufklappen.

http://devphp.de/pgn/menu2.php

Kann nochmal jemand helfen?

Ergänzung (9. Januar 2016)

Ausserdem wird es zu früh aufgeklappt, wenn man von unten an den Menüpunkt fährt, wird es schon aufgeklappt, wenn man das unsichtbare Element "berührt".

 

[Lawnmower]

Zum zu weit rechts aufklappen: Bei div.menu ul li ul noch padding: 0 rein.
Das div.menu ul benötigt ausserdem noch ein float:left damit der Rest nicht rausläuft.

Statt visibility:hidden probiers mal mit display:none. Beim hidden sind die Elemente eben noch da (nur nicht angezeigt), beim display:none werden die effektiv rausgenommen.

 

[smallwall]

Wow, bin begeistert Vielen Dank.

 

[Lawnmower]

Cool - btw schöne CSS Formatierung.

 

[smallwall]

Eine Sache noch: wenn man das Fenster verkleinert, wird das letzte Element "in die 2. Reihe geschoben". Wie kann man das verhindern?

Ergänzung (9. Januar 2016)

Ach ich weiß schon, div.menu eine min-width geben, vielleicht menuitems x menuitemwidth

Ergänzung (9. Januar 2016)

Noch etwas: In deinem geposteten Beispiel blendet sich das Submenü sanft ein, macht man das mit jQuery?

 

[Lawnmower]

Ne wurde da mit CSS transition gemacht.

 

[smallwall]

Auf dem Desktop läuft es gut, aber auf meinem Nexus 7 nicht. Auf den Touchscreens gibt es ja kein wirkliches :hover. Das heißt, wenn man auf das Menü drückt, wird es nach kurzer Zeit wieder ausgeblendet.
Weiter habe ich versucht eine Transition einzubauen, aber das läuft nicht wie geplant. Unter Chrome funktioniert es gar nicht, und unter Firefox nicht wie gewünscht. Dort wird manchmal eine Transition ausgelöst, diese blendet aber aus statt ein, und wenn es ausgeblendet ist, wird es sprunghaft wieder angezeigt/eingeblendet (bei jedem 2. Mouseover, oder so ähnlich).
Hat jemand Ideen? Meine Lösung für das erste Problem wäre, mit jQuery die Anzeige auslösen beim betätigen des Links. Aber das ist dann keine reine CSS Lösung mehr.

 

[Lawnmower]

Du könntest die Navigation statt nur mit :hover auch noch mit onclick lösen - dafür brauchts kein jQuery.
Wenn die Webseite auch auf Smartphones nutzbar sein soll, musst Du Dich mit Responsive Designs beschäftigen und am besten gleich mit dem Design Ansatz "Mobile First".

Es ist nicht mehr ganz so trivial eine Webseite zu machen wie früher wenn alle möglichen Endgeräte berücksichtigt werden sollen; die verlinkte Beispielsseite bietet übrigens auch ein Responsive Layout.