Camping_RIDER: Dropdown nach links ausfahren

Beitrag lesen

Aloha ;)

Setze bitte einen Link zur problematischen Seite

Kann Matthias da nur zustimmen. Aber weil ich zu viel Zeit hab, hab ich deinen geposteten code mal durch dabblet.com gejagt und ein bisschen mit den Chrome-Developer-Tools gespielt.

Folgendes ist dein Problem: Sobald dein Dropdown öffnet, setzt du die innere ul visuell nach links weg. Faktisch - das heißt was das Eltern-Element li betrifft - ist sie aber immer noch da und das Eltern-Element li wird bei Erscheinen automatisch breiter und dadurch nach links verschoben.

Die Lösung: Es gibt mehrere Möglichkeiten...

Möglichkeit 1 - wie es mobile.de macht:

mobile.de hat das Eltern-li relativ positioniert und das Kind-ul absolut. Dadurch wird das Kind-ul aus dem Kontext des Eltern-li gerissen und das Eltern-li wird nicht mehr größer sobald Kind-ul auftaucht. Vorteil: Die verschiedenen Dropdowns bzw. ihre "Öffner" können unterschiedlich breit sein. Nachteil: Zumindest ich persönlich finde den Wechsel zwischen relative / static / absolute ziemlich nervtötend zum Programmieren...

Möglichkeit 2 - wie ich es schon gemacht habe:

Wenn du vermeiden willst, dass sich das Elternelement vergrößert, musst du ihm eine max-width mitgeben. Es gibt insgesamt eine Vielzahl an Gründen, warum man die Anzeigegröße des Eltern-li genau kontrollieren möchte. Meine Lösung ist vielleicht etwas krass, aber ich würde einfach das Layout betrachten, mir ansehen wie viel Platz der "Öffner" im Layout einnehmen soll und seine Breite dann durch gleichzeitige Angabe von width, min-width und max-width zementieren. Und schwuppdiwupp verschiebt sich nix mehr ;) Wenn eine width für das Eltern-/Öffner-li nicht von vornherein festgelegt werden kann oder werden soll ist Möglichkeit 1 die bessere Alternative.

Und als allgemeiner Hinweis: Wenn dir nochmal sowas unterkommt, dann schnapp dir Google Chrome und seine Entwicklertools. Da kann man per "force state" Elemente zwangsweise auf "hover" setzen, sodass man bequem nach dem Fehler suchen kann. Alternativ kann FireBug für Firefox das sicher so oder so ähnlich auch.

Grüße,

RIDER

--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[