Selbstpositionierendes und autoskalierendes CSS Menü

[nocheinPoet]

Moin,

so ich habe es nun wie versprochen mal hochgeladen:

http://stylelight.eu/

Obere Menü ist mit Superfish ohne JS und darunter ist das neue Menü.

Style Definitionen fürs neue Menü stehen alle direkt im Quellcode der Seite. Das neue Menü ist abwärtskompatibel:

http://browsershots.org/http://stylelight.eu/menue_18_06.html

Und sieht auch im IE 7 - 9 auf Win7 richtig aus.

Vorteil des neuen Menü ist, es skaliert automatisch über beliebig viele Ebenen, die Breite passt sich von alleine an den breitesten Menüeintrag in der Liste an, die „►▼“ werden automatisch hinzugefügt.

Was noch Probleme macht, ist das ein- und ausblenden, bisher klappt es nur sauber über visibility bzw. opacity und ich bekomme den überlangen Border noch nicht weg.

Ansonsten bin ich für selber gestrickt aber soweit schon recht zufrieden.

[Gunther]

Moin,

nach einem ersten "schnellen Blick" ...

Was noch Probleme macht, ist das ein- und ausblenden, bisher klappt es nur sauber über visibility bzw. opacity und ich bekomme den überlangen Border noch nicht weg.

Du blendest die Unterpunkte niht aus (display:none), was dazu führt, dass sie "eingeblendet" werden, selbst wenn man weit unterhalb des Menüs mit dem Cursor drüber fährt. Außerdem verursacht das bei einer Viewportbreite von bspw. 1024px eine horizontale Scrollbar, weil die Untermenüs ungeachtet des Platzes immer nur nach rechts aufklappen.

Gruß Gunther

[nocheinPoet]

Abend Gunther,

das visibility hatte ich nur in der Version vergessen, ist nun wieder drin. Superfish verhält sich doch auch so, geht immer nach rechts auf.

Gruß Manuel

[Gunther]

N'Abend Manuel!

Superfish verhält sich doch auch so, geht immer nach rechts auf.

Das ist aber doch kein Grund, sich deshalb dem "unzureichenden" Verhalten anzuschließen ...! ;-)

Mal abgesehen davon, dass Drop-Down Menüs eh etwas "problematisch" sind, weil der User auf Anhieb eben nicht gleich erkennen kann, welche Menüpunkte vorhanden sind, wird das von Ebene zu Ebene immer problematischer. Denn der User muss quasi der Intention des Erstellers bezüglich der Struktur folgen, ansonsten kann es passieren, dass er seinen gewünschten Menüpunkt gar nicht findet.

Aber zurück zu dem "Problem" ...
Du könntest bspw. per Javascript nachhelfen, indem du vor dem Ausklappen/ Einblenden eines weiteren Submenüs prüfst, ob noch genügend Platz vorhanden ist und wenn nicht, dieses zur anderen Seite aufklappst/ einblendest.

Oder du machst es per CSS, indem du bspw. die linke Hälfte des Menüs 2 Level lang nach rechts aufklappst und ab dem 3. Level nach links (wenn es nicht mehr als 4 Level gibt). Für die rechte Hälfte des Menüs entsprechend halt zur jeweils anderen Seite.

Hierbei könnte u.a. der CSS-Selektor 'nth-child' hilfreich sein.

Gruß Gunther

[nocheinPoet]

Moin Gunther

Superfish verhält sich doch auch so, geht immer nach rechts auf.

Das ist aber doch kein Grund, sich deshalb dem "unzureichenden" Verhalten anzuschließen ...! ;-)

Mal abgesehen davon, dass Drop-Down Menüs eh etwas "problematisch" sind, weil der User auf Anhieb eben nicht gleich erkennen kann, welche Menüpunkte vorhanden sind, wird das von Ebene zu Ebene immer problematischer. Denn der User muss quasi der Intention des Erstellers bezüglich der Struktur folgen, ansonsten kann es passieren, dass er seinen gewünschten Menüpunkt gar nicht findet.

Aber zurück zu dem "Problem" ...
Du könntest bspw. per Javascript nachhelfen, indem du vor dem Ausklappen/ Einblenden eines weiteren Submenüs prüfst, ob noch genügend Platz vorhanden ist und wenn nicht, dieses zur anderen Seite aufklappst/ einblendest.

Oder du machst es per CSS, indem du bspw. die linke Hälfte des Menüs 2 Level lang nach rechts aufklappst und ab dem 3. Level nach links (wenn es nicht mehr als 4 Level gibt). Für die rechte Hälfte des Menüs entsprechend halt zur jeweils anderen Seite.

Hierbei könnte u.a. der CSS-Selektor 'nth-child' hilfreich sein.

So nach der Reihe, ich habe heute Morgen nun die Styles angepasst, es sieht nun aus wie bei Superfish (ist nun mal die Referenz), heißt die Border sind nun nicht mehr zu lang.

Dann ist das eine Ziel, es ohne JS steuern zu können, wenn Anpassungen der Position ab einem bestimmten Level erfolgen, dann nur im Theme. Die Default Styles geben nur einen ganz freien flexiblen Rahmen vor, der dann eben beliebig in einem Theme angepasst werden kann.

Hier der aktuelle Stand: http://stylelight.eu/

Was mich noch interessiert, ein Kollege hier hat das ein- ausschalten über left: - 9999% oder so realisiert, der Punkt war, dass ausgeblendete Container für Reader nicht zu lesen sind. Daran werde ich noch mal spielen müssen.

Gruß Manuel

[nocheinPoet]

So nun bekomme ich das ein- und ausblenden auch über verschieben hin:

  
.menue ul li ul                  {left: -1000%; opacity: 0;}  
.menue ul li ul li ul            {left: -1000%; opacity: 0;}  
.menue ul li:hover > ul          {left:   auto; opacity: 1;}  
.menue ul li ul li:hover > ul    {left:   100%; opacity: 1; transition: opacity 0.25s linear;}  

was mich wundert ist, ohne

  
.menue ul li ul li ul            {left: -1000%; opacity: 0;}  

werden beim hover immer alle Untermenüs angezeigt, kann man die erste und zweite Zeile noch zusammenfassen?

Gruß Manuel

[Gunnar Bittersmann]

@@nocheinPoet:

nuqneH

.menue ul li ul {left: -1000%; opacity: 0;}

Keine gute Idee. Die Gründe kannst du bei Zeldman nachlesen.

Qapla'

[nocheinPoet]

@@nocheinPoet:

nuqneH

.menue ul li ul {left: -1000%; opacity: 0;}

Keine gute Idee. Die Gründe kannst du bei Zeldman nachlesen.

Qapla'

Moin,

mit
.menue ul li ul {text-indent: 100%; white-space: nowrap; overflow: hidden;}

bekommt man aber die Boxen nicht weg, sondern nur den Text. Da müsste man noch mehr machen.