Kann sich das CSS-Dropdown-Menü wie Windows7-Dropdown-Menüs verhalten?
Nehmen wir an, das Menü hat die folgende Struktur:
%Vor% Und so sieht es aus, wenn es formatiert wird (bitte beachten Sie, dass verschachtelte Untermenüs position: absolute; left: 100%; sind).
Jetzt ist die Frage - kann ich vermeiden, dass sie vom Bildschirm gedrängt wird? Ich suche nach einer Lösung, die Windows7-Menüs verwenden (sie gehen nie vom Bildschirm). Gibt es einen einfachen Javascript-Check? Ich denke, dass nur left: -100%; funktionieren würde, aber unter welchen Bedingungen? Ich brauche nur eine Idee und ich kann das in Javascript schreiben:)
3 Antworten
Soweit ich weiß, gibt es keine Möglichkeit, diese Prüfung nur mit CSS durchzuführen. Sie müssen JavaScript verwenden. Die einfachste Methode wäre Mouseover / Mouseout (oder Hover, wenn Sie jquery verwenden) an die Elemente zu binden und dann die Elemente x-offset + width mit der Fensterbreite zu vergleichen.
Mit einer reinen CSS-Lösung können Sie immer die Position der Untermenüs wechseln. Wenn die erste Position so positioniert wurde, dass sie rechts von ihrer übergeordneten Position angezeigt wird, könnte das folgende (dritte) Untermenü links positioniert werden und so weiter. Vielleicht könnten Sie sogar den :nth-child -Selector verwenden.
Anschließend können Sie Ausnahmen für größere Bildschirme erstellen, indem Sie einfach die linke Position wechseln, beginnend mit dem n-ten Kind-Untermenü (mithilfe von CSS-Medienabfragen).
Nein, Sie müssen JavaScript verwenden, um Positionen zu berechnen
Tags und Links javascript html css html5 css3