Contao CSS3 Navigation mit transition

[Juke]

Hallo liebe Forumsgemeinde,

hier habe ich an 2 Contao-Dropdown-Menues gearbeitet, die ich, sofern alles darin in Ordnung und verwendbar wäre, der Allgemeinheit zur Verfügung stellen würde. Da ja das Menumatic vom Entwickler nicht weiter gepflegt wird und in Anbetracht der Tatsache, dass inzwischen - mit Ausnahmen vom IE - die meisten Browser mit CSS3 umgehen können, habe ich versucht für das Contao-Naviagtionsmodul ein CSS zu schreiben, was ein Dropdown basierend auf transitions ermöglicht.

Hier meine beiden Ergebnisse

Mit transition height
http://www.jukenetbox.de/dropdown1/

Der Trick bei transition height ist der, dass im Hintergrund die Höhe der ul für zwei Zustände fest definiert ist. Im Normalzustand ist die Höhe 0, bei hover wird sie 250px groß. Das ist aber auch zugleich der Nachteil, denn durch die fixe Höhe ist die ul wesentlich länger als es die Anzahl der li vermuten lassen. Transistion height funktioniert nur leider nicht mit height:auto. Deswegen muss man beim Einsatz in Webseiten darauf achten, die Höhe immer auf das längste Submenu anzupassen. Ganz Fleißge können via Seitenstruktur und body-class die Höhen auch unterschiedlich anpassen.

Mit transistion opacity
http://www.jukenetbox.de/dropdown2/
Bei der Lösung mit opacity macht man sich die Sichtbarkeit zunutze. Der Normalzustand ist unsichtbar, also opacity=0, bei hover ändert sich das in 0.9 oder 1.

Bei beiden Menüs sind 2 Lösungen enthalten.
Mit Ausnahme vom Menüpunkt Service slidet / blendet das Menü bei :hover ein bzw. wieder aus.
Um zu zeigen, dass auch das möglich ist habe ich es beim Menüpunkt "Services" so eingerichtet, dass das Menü sichtbar bleibt.

Beide Menüs können aber (bisher?) nur 1 Unterebene.
Da ich aber ohnehin der Ansicht bin, dass ein Menü mit 2 Unterebenen erstens mal auf keiner Webseite schön aussieht und zweites die Bedienung, auch für nicht motorisch-gehandicapte User, eine Herausforderung darstellt, habe ich auf eine weitere, zweite Ebene verzichtet.

Was mir jedoch noch am Herzen liegen würde ist das Öffnen des Untermenues bei :focus.
Das geht, soweit ich ich das feststellen konnte, mit CSS gar nicht.
Hier würde man wahrscheinlich doch MooTools und onFocus einsetzen müssen - ich muss aber gestehen, dass ich mir diesem Bereich die Kenntnisse fehlen um das einzubauen.

So, dann hoffe ich mal im Allgemeinen, als auch in Sachen MooTools im Besonderen, auf eure Meinungen und Mithilfe.

Beste Grüße
juke

[qba]

Find ich schick.

Von mootools habe ich leider aber auch keine Ahnung. Da kann ich nicht weiterhelfen.

[jubel]

Da schließe ich mich an.

Version 1 hat noch eine kleine Macke:
Wenn man nicht schnell genug mit der Maus nach unten fährt, klappt das Untermenü wieder zu bevor man dort ist.

[pmmueller]

Hallo Juke,

Klasse.

Als ich in deiner Facebook-Post "MooTools" und "Dropdown" gelesen hatte, dachte ich "Nein, nicht schon wieder menumatic...", um so angenehmer überrascht war ich, deinen Forumsbeitrag zu lesen.

Dein Beitrag ist "gelesezeichent" und ich werde mir die beiden gezeigten Möglichkeiten genauer anschauen, sobald das Buch schreiben mir dazu ein bisschen Zeit lässt, aber sie sehen erstens schon mal gut aus und scheinen zweitens gut durchdacht zu sein

Was die Anzahl der Dropdown-Ebenen angeht, kann ich dir nur zustimmen, dass ein Dropdown mit mehr als 1 Ebene nicht sinnvoll ist. Dropdowns sind praktisch, weil sie einen Klick für die Unterebene ersparen, aber falls es noch weitere Unterebenen gibt, kann man die besser mit einem getrennten Navigationsmodul darstellen, zum Beispiel in der linken Sidebar.

P.S.
Leider kann ich dir mit dem :focus und den MooTools auch nicht weiterhelfen...

P.P.S.
Bei "Mir transistion opacity" sind dir gleich 2 Typos in einer Zeile reingerutscht.

[Juke]

Da schließe ich mich an.

Version 1 hat noch eine kleine Macke:
Wenn man nicht schnell genug mit der Maus nach unten fährt, klappt das Untermenü wieder zu bevor man dort ist.

Ich dachte zunächst, dass das nur beim IE auftritt und hatte das in den cc schon angepasst.
Ist aber so, dass FF das wohl auch so haben möchte.
Der Grund liegt im padding des li der obersten Menüebene.
Das muss sich mit dem submenu überlappen (bzw. "unterlappen"), sonst springt das Untermenü weg und spielt "fang mich" mit einem .
Habe das korrigiert.
Danke für den Hinweis .

[Juke]

P.P.S.
Bei "Mir transistion opacity" sind dir gleich 2 Typos in einer Zeile reingerutscht.

das ist, auch für mich schlimmen Buchstabenverwuchsler, rekordverdächtig ...

Dropdowns sind praktisch, weil sie einen Klick für die Unterebene ersparen, aber falls es noch weitere Unterebenen gibt, kann man die besser mit einem getrennten Navigationsmodul darstellen, zum Beispiel in der linken Sidebar.

dito - zum Thema Dropdowns gibt es aber noch mehr Pro und Contra :-)

EDIT: ... bin mal gespannt, was deine genauere Untersuchung zu Tage fördern wird.
Danke schonmal.

[ATLAS]

Ich finde deine Variante sehr schön. Sie könnte für die neue Musikschule eine gute Ergänzung sein.

Allgemein: Ich habe hier noch eine sehr schöne Variante gesichtet. Sehr übersichtlich. Allerdings mur bedingt mit reinem css zu machen.

[Juke]

Hallo Atlas,

das von dir referenzierte Beispiel ist grafisch sehr schön gemacht. Allein schon so viele Ideen für die Icons zu haben ist fein. Allerdings ist das Ganze dann imho doch schon mehr ein Megamenue. Da sehe ich den Einsatzbereich weniger weit verbreitet, weil das für Corporate Websites ein bisschen oversized ist - meiner Meinung nach. Oft gebraucht wird es jedoch in shops, vielleicht auch für Vereine mit einem breiten Angebot.
Na, schauen wir mal ... vielleicht wäre das mein nächstes Ausknobel-Projekt :-)

[RainerG]

Sehr schön gemachtes Menü - beide Varianten. Man mag das gar nicht entscheiden willen, welche man wählen wollte.

Was mir an Variante 1 auffällt:
Wenn ich mit der Maus ein Menü nach unten verlassen, dann bleibt es bestehen. Verlasse ich es seitlich, dann schließt es sich. Variante 2 schließt auch, wenn ich das Menü nach unten verlasse.
--> Win7 mit FF 14.0.1

[jubel]

Wenn ich mit der Maus ein Menü nach unten verlassen, dann bleibt es bestehen. Verlasse ich es seitlich, dann schließt es sich.

Und was mir noch daran auffällt:
Das benachbarte Menü öffnet sich, wenn ich seitlich ziehe, d.h. der Hoverbereich ist jetzt erheblich größer als Level1.

[Juke]

Wenn ich mit der Maus ein Menü nach unten verlassen, dann bleibt es bestehen. Verlasse ich es seitlich, dann schließt es sich. Variante 2 schließt auch, wenn ich das Menü nach unten verlasse.
--> Win7 mit FF 14.0.1

Da zitiere ich mal aus meinem Eingangsposting

Im Normalzustand ist die Höhe 0, bei hover wird sie 250px groß. Das ist aber auch zugleich der Nachteil, denn durch die fixe Höhe ist die ul wesentlich länger als es die Anzahl der li vermuten lassen. Transition height funktioniert nur leider nicht mit height:auto. Deswegen muss man beim Einsatz in Webseiten darauf achten, die Höhe immer auf das längste Submenu anzupassen. Ganz Fleißge können via Seitenstruktur und body-class die Höhen auch unterschiedlich anpassen.

Die ul im Hintergrund hat eine transparente Farbe, deswegen kannst du nicht sehen, wie lang sie wirklich ist.
Damit der slidende Effekt angewendet werden kann, hat die ul im Normalzustand die Höhe 0px, wenn man hovert vergrößert sie sich auf 250px. Zwischen 0 und 250 wird transition height angewandt. Dabei ist es zwingend notwendig zwei feste Größen anzugeben. Deswegen ist die ul beim Menue1 länger als die li, die du sehen kannst und deswegen verschwindet sie erst, wenn man die Maus ganz weit nach unten oder seitlich zieht. Muss man - meiner Meinung nach - aber nicht unbedingt als Nachteil sehen. Der positive Effekt ist, dass das Menue dadurch schön im Blickfeld des Betrachters bleibt und nicht so hypernervös umherzappelt.

Beim zweiten Menü wird transition auf die Sichtbarkeit (opacity) angewendet - weil man hier keine feste Höhe braucht und auch nicht angibt, ist die ul immer nur so groß wie ihr Inhalt und nicht größer. Darum verschwindet das Menü sofort, wenn man den li Bereich verlässt.

[pmmueller]

dEDIT: ... bin mal gespannt, was deine genauere Untersuchung zu Tage fördern wird.
Danke schonmal.

Dat kann aber noch 'n bisken dauern. Nicht das du ungeduldig wirst.

Ich hänge im Moment noch in Kapitel 4 (Installation), und Dropdowns kommen erst in Kapitel 9. Wenn ich nicht zwischendurch mit dem ganzen neuen Krempel im CSS-Framework die Kapitelstruktur ändere...

[dieselboy]

Was mir jedoch noch am Herzen liegen würde ist das Öffnen des Untermenues bei :focus.
Das geht, soweit ich ich das feststellen konnte, mit CSS gar nicht.
Hier würde man wahrscheinlich doch MooTools und onFocus einsetzen müssen - ich muss aber gestehen, dass ich mir diesem Bereich die Kenntnisse fehlen um das einzubauen.

Hallo Juke,

das Aufklappen funktioniert mit :focus genauso wie mit :hover. Das Problem sind aber die Links in der ersten Menüebene, die kurz nach dem Focus geöffnet werden. Das lässt sich lösen, indem du die Links entweder komplett entfernst, oder per JS verhinderst, dass sie geöffnet werden.

window.addEvent('domready', function() {
  $$('.mod_navigation a.submenu').addEvent('click', function(event) {
    event.stop();
    event.stopPropagation();
  });
});

Das Ganze ist natürlich nicht der Weisheit letzter Schluss. Man könnte z.B. noch abfragen, ob touch-Events möglich sind - also prüfen, ob die Seite mit einem Smartphone oder Tablet angesehen wird - und dann erst die Links in der ersten Menüebene deaktivieren. Je nachdem, welches Verhalten du haben möchtest.


Viele Grüße
Daniel

[Messen]

Dein CSS Menü gefällt mir sehr gut, hab mal mit Variante 1 etwas rumprobiert.
Möchte vor jedem Menüelement der ersten Ebene ein List-Style Image positionierten, leider spricht
mein CSS hier entweder alle Elemente des Menüs an oder gar keines...

Kann mir hier jemand nen Tip geben, bin schier am verzweifeln...

#mainmenue {
overflow:visible;
z-index:999999999999999999999999;
}

#mainmenue {
width:80%;
height:80px;
top:60px;
position:fixed;
padding-top:25px;
}


#mainmenue li {
width:15%;
overflow:visible;
float:left;
margin-right:10px;
margin-left:0;
padding-right:5px;
padding-left:10px;
text-align:center;
list-style-image:url("uploads/datastore/website/viereck.png");
}

#mainmenue a, #mainmenue span {
width:100%;
display:block;
padding-bottom:0;
color:#fff;
font:24px 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
}

#mainmenue li:hover a, #mainmenue a:hover, #mainmenue .active, #mainmenue .trail a, #mainmenue a:focus {
color:#4b85d8;
}

#mainmenue li:hover ul a {
color:#fff;
}

in diesem Beispiel erhalten alle Elemente auch die des DropDown also Ebene 2 das List-Item.

Dank Euch!!!

Messen

[brandtmarke]

#mainmenue li li {
list-style-image: none;
}

Gruß

Dennis

[brandtmarke]

Zum Ursprungsthema: Ich liebe CSS3; auf http://www.com4viva.de habe ich das Menü und noch einiges Andere mit CSS3 gelöst

[Messen]

Danke die Images zu den einzelnen Punkten werden nun im Hauptmenü ausgegeben und im Submenü unterdrückt.
Leider habe ich jetzt noch das Problem, dass mir das Submenü Level2 beim Mouseover immer nur auf der linken Seite angezeigt wird.
Egal welchen der Hauptmenüpunkte ich mit der Maus berühre.

Bin den Code schon durchgegangen, aber ich sehe irgendwie keine relevante Abweichung zum original?

Kann natürlich auch sein, dass ich heute einfach schon viel zu lange über die Sachen drüber schau! )

Aber vielleicht kann mir hier ja trotzdem jemand helfen!?!

Dank Euch

Grüße Messen

/* #mainmenue +++++++++++++++++++++++++++++++++++++++ */
#mainmenue {
    overflow:visible;
    z-index:999999999999999999999999;
}

#mainmenue {
    width:100%;
    height:80px;
    top:60px;
    position:absolute;
    padding-top:25px;
}

#mainmenue a, #mainmenue span {
    width:100%;
    display:block;
    padding-bottom:0;
    color:#fff;
    font:24px  'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
}

#mainmenue ul {
    left:30px;
    position:absolute;
    list-style-image:url("uploads/datastore/website/viereck.png");
}

#mainmenue li {
    min-width:138px;
    overflow:visible;
    float:left;
    margin-right:0;
    margin-left:0;
    padding-right:5px;
    padding-left:5px;
    text-align:left;
    list-style-type:none;
    background-color:transparent;
}

#mainmenue li:hover a, #mainmenue a:hover, #mainmenue .active, #mainmenue .trail a, #mainmenue a:focus {
    color:#4b85d8;
}

#mainmenue li:hover ul a {
    color:#fff;
}


/* untermenue ein- und ausblenden +++++++++++++++++++++++++++ */
#mainmenue .submenu ul {
    top:55px;
    position:absolute;
    overflow:hidden;
    margin-left:-9999px;
    left:-10px;
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}

#mainmenue li.submenu:hover ul {
    position:absolute;
    overflow:hidden;
    margin-top:0;
    margin-left:0;
    opacity:0.9;
}


/* ul level_2 +++++++++++++++++++++++++++++++++++++++++ */
#mainmenue .level_2 {
    width:25%;
    position:absolute;
    margin-top:20px;
    list-style-image:none;
}

#mainmenue .level_2 li {
    width:90%;
    margin-right:10px;
    margin-left:10px;
    text-align:left;
    border-right:1px solid #4b85d8;
    border-left:1px solid #4b85d8;
    background-color:rgba(75,133,216,0.9);
    z-index: 99999999999;
}

#mainmenue .level_2 li.first {
    padding-top:10px;
    border-top:1px solid rgba(75,133,216,0.7);
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
}

#mainmenue .level_2 li.last {
    padding-bottom:3px;
    border-bottom:1px solid rgba(75,133,216,0.7);
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
    behavior:url('plugins/css3pie/PIE.htc');
    border-bottom-right
}

#mainmenue .level_2 a, #mainmenue .level_2 span.active {
    width:90%;
    display:block;
    margin-right:10px;
    margin-left:10px;
    padding-top:3px;
    padding-bottom:3px;
    color:#fff;
    text-transform:none;
    font:18px 'Open Sans Condensed','Arial Narrow',Arial,sans-serif;
}

#mainmenue .level_2 a:hover, #mainmenue .level_2 span.active, #mainmenue .level_2 a:focus {
    color:#000;
}


/* ueber erstem li kein Rahmen */
#mainmenue .level_2 .first a, #mainmenue .level_2 .first.active .active {
    border-top: none;
}


/* unter letztem li kein Rahmen */
#mainmenue .level_2 .last a, #mainmenue .level_2 .last.active .active {
    border-bottom: none;
}

[brandtmarke]

Live könnte man das besser beurteilen, aber

#mainmenue .submenu ul {
    top:55px;
    position:absolute;
    overflow:hidden;
    margin-left:-9999px;
    left:-10px;
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
}

wird wohl er Haken sein, absolute Positionierung bezieht sich immer auf ein Elternelement mit relativer Positionierung; geb doch dem Eltern-<li> mal ein position: relative, das wird wahrscheinlich helfen.

Evtl. mal einen neuen Thread aufmachen, wenn möglich mit Link, damit man sich das mal live angucken kann.

gruß

Dennis

[Messen]

Tja das wars wohl

Ne neue Regel :

#mainmenue li.submenu  {
  position: relative;
}

und Level_2 auf width:100%

und siehe da alles bestens!

Ab und zu sollte man sich halt doch wieder mit den CSS Basics befassen.

Vielen Dank

Messen

[pmmueller]

@Messen

Die Kombination von position:relative und positon:absolute ist eine echte Grundlagentechnik. Hier wird das ausführlich beschrieben:
http://little-boxes.de/lb1/12.5.2-ab...n-element.html

[Messen]

@pmmueller

danke für den Tipp... das Buch habe ich und auch gelesen... aber vor lauter Bäumen mal wieder den Wald aus den Augen verloren.
Aber Gottseidank wird man immer wieder mal daran erinnert, das man die einfachen Dinge nicht ganz ausser acht und vernachlässigen sollte!

Danke

[Messen]

@Messen

Die Kombination von position:relative und positon:absolute ist eine echte Grundlagentechnik. Hier wird das ausführlich beschrieben:
http://little-boxes.de/lb1/12.5.2-ab...n-element.html

...das Buch ist übrigens Top - genauso wie der Contao Titel... freue mich schon auf die neue Auflage!

[Madob]

sollte das auch mit Contao 3 funktionieren?

Gefällt mir sehr gut, nur konnte ich die cto Datei nicht importierten.

[planepix]

Hallo Madob,

die cto und damit das Theme muss in die gleiche Version importiert werden in der es exportiert wurde.
Da di ecto-Datei auch nur eine Zip-Datei ist, kannst du das auch entpacken und die CSS entsprechend extrahieren und zu importieren.

[Madob]

danke für den Tip.

Leider befindet sich in dem Archiv nur eine theme.xml und ein PNG Datei, keine CSS. hmm

[planepix]

Ok.
In der cto stehen die CSS in der XML und werden beim Import dann in die Datenbank importiert.
Alternativ schau in den Quellcode und schau dir dort das CSS an oder frag einmal bei Jutta an.

Oder:
Installiere wie auf der Website von jukemedia zu sehen ist, die Contao-Version 2.11.5, dann sollte der Import klappen.
Von da an dann Update auf 3.0.3.

[Madob]

ok, danke. Werd bei Jutta mal fragen, extra die andere Version zu installieren ist wohl zuviel Aufwand