3.0.x Responsives Menü wird nicht angezeigt

[buddla]

Hallo miteinander,

da ich mich seit einiger Zeit intensiv mit dem Thema 'responsives Webdesign' beschäftige, bin ich im Internet auf ein responsives Menü gestoßen, welches mir sehr gefallen hat. Ich habe es versucht in C3 einzubinden, das Template 'nav_default' wurde angepasst (auch mit Infos aus dem Forum hier - Danke!) und die entsprechende css- und js-Datei eingebunden. In der normalen Darstellung (über 768px) funktioniert das Menü nicht, darunter schon.

Da ich leider nicht unbedingt ein PHP- oder CSS-Guru bin, weiß ich nicht mehr weiter. Über 'Firedebug' konnte ich nichts fehlerhaftes (aus meiner Sicht) feststellen.

Vielleicht ist es nur eine kleine Änderung in der CSS-Datei? Es wäre nett, wenn man mir helfen könnte. Vielen Dank im voraus!

Das originale HTML-Menü:
http://www.kraehenwald-h0.de/test_html/index.html

Die (fehlerhafte) Umsetzung mit Contao:
http://www.kraehenwald-h0.de/test_contao/index.php


PS:
Unabhängig von der obigen Lösung. Ich bin auf der Suche nach einer universellen Lösung für ein Menü, welches auf Smartphones, Tablet und Desktop gleichermaßen gut funktioniert. Die Lösung über die Quicknavigation gefällt mir gar nicht, da diese von Android und iOS sehr individuell und unterschiedlich interpretiert wird.

http://www.kraehenwald-h0.de ist die erste meiner Umsetzungen in Contao3. Meine eigene private Homepage und bestimmt noch ausbaufähig !


MfG
Harry (oder Harald)

[MacKP]

PS:
Unabhängig von der obigen Lösung. Ich bin auf der Suche nach einer universellen Lösung für ein Menü, welches auf Smartphones, Tablet und Desktop gleichermaßen gut funktioniert. Die Lösung über die Quicknavigation gefällt mir gar nicht, da diese von Android und iOS sehr individuell und unterschiedlich interpretiert wird.

Ich hab da mal ne Frage zu: was meinst du mit unterschiedlich interpretiert?
EIgentlich sollten die das beide richtig interpretieren und dir ein Menu anbieten. Natürlich wird das jeweils vom Aussehen her unterschiedlich sein, da die ihre eigne GUI haben. Meinst du das? Was anders dürfte nicht sein. Und genau da liegt ja eigentlich auch ein Vorteil drinn: Der User kennt das Aussehen und weiß was er damit anfangen kann.

Viele Grüße

[Bennie]

Versuch mal folgendes:
Lass die Anweisung weg!

.nav_responsive li {
    position: relative;
} 

und ändere die hover Anweisung für die 2. Ebene

.nav_responsive > li.hover > ul {
    left: auto;
    top: auto;
} 

Das muss jetzt nicht die einzige Lösung sein, aber in der Richtung solltest Du mal schauen.

LG
Bennie

[buddla]

Ich hab da mal ne Frage zu: was meinst du mit unterschiedlich interpretiert?
EIgentlich sollten die das beide richtig interpretieren und dir ein Menu anbieten. Natürlich wird das jeweils vom Aussehen her unterschiedlich sein, da die ihre eigne GUI haben. Meinst du das? Was anders dürfte nicht sein. Und genau da liegt ja eigentlich auch ein Vorteil drinn: Der User kennt das Aussehen und weiß was er damit anfangen kann.

Viele Grüße

Unterschiedlich interpretiert ist vielleicht die falsche Aussage, ich meinte eigentlich die unterschiedliche Darstellung der jeweiligen GUI (wie sieht es eigentlich auf einem Blackberry aus?) Ich hatte mit einem Kunden Probleme, dem ich bei einem Update von Contao 2.x auf 3 auch noch eine mobile Anpassung verkauft habe. Bei der Abnahme (mit Test von iPad und iPhone) war alles ok - nur seine Frau hatte leider ein Android-Handy. Dem Kunden ist oder war es allerdings nicht möglich zu erklären warum da ein Unterschied ist und dieser war im Endeffekt ziemlich stinkig. Da ich genau von diesem Kunden wieder eine Website umstellen soll, möchte ich mit dem Verzicht auf die Quicknavigation weiteren Diskussionen aus dem Weg gehen. Ich hoffe du verstehst mich .

Sinnlose Diskussionen mit uneinsichtigen Kunden werden leider nicht bezahlt. Man passt sich an oder verzichtet leider auf den Auftrag (was wir eigentlich alle nicht wollen).

MfG

[buddla]

Versuch mal folgendes:
Lass die Anweisung weg!

.nav_responsive li {
    position: relative;
} 

und ändere die hover Anweisung für die 2. Ebene

.nav_responsive > li.hover > ul {
    left: auto;
    top: auto;
} 

Das muss jetzt nicht die einzige Lösung sein, aber in der Richtung solltest Du mal schauen.

LG
Bennie

werde ich demnächst tun. Allerdings hat mich die Grippewelle heute auch erreicht und habe im Bett nur ein Tablet zur Verfügung (und da will ich nicht programmieren und der Kopf will auch nicht so recht).

Ich melde mich demnächst mit einem Ergebnis wieder. Danke trotzdem!


MfG

Harry

[plastiko]

Die (fehlerhafte) Umsetzung mit Contao:
http://www.kraehenwald-h0.de/test_contao/index.php

Das liegt am overflow: hidden für .block. Die Deklaration ist zum einschließen der Floats gedacht. In deinem Fall ist das aber nicht nötig, da du diesen clearfix verwendest:

.nav_responsive::before, .nav_responsive::after { 
content: " ";
display: table;
}

Du kannst deshalb overflow:hidden für die betroffenen Elemente überschreiben:

#header .inside, #header nav {
overflow: visible;
}

Die Frage tauchte schon öfter auf. Z.B:
https://community.contao.org/de/show...l=1#post245493
Da wird auch deutlich warum es in vielen Beispielen funktioniert, in deiner Contao-Umsetzung aber (noch) nicht.

Gute Genesung.

[Bennie]

Meine Idee ging eher davon aus die overflow Anweisung nicht zu überschreiben, aber ich habe auch so ein ähnliches Menü gebaut, bei dem ich ebenfalls die relative Anweisung für li belassen habe , das hatte den Vorteil, dass man die 2. Ebene so breit werden lassen kann wie die Hauptebene mit width:100%;
Das ist natürlich auch Geschmackssache, aber manch einer findet es eben nicht so schön wenn die 2. Ebene breiter oder schmaler als die Hauptpunkte ist.
Ich hatte seinerzeit von hier http://cssmenumaker.com/css-menus ein paar Anregungen.

LG
Bennie

[plastiko]

ich habe auch so ein ähnliches Menü gebaut, bei dem ich ebenfalls die relative Anweisung für li belassen habe

Dann aber ohne overflow: hidden; für das umschließende Element (z.B .mod_navigation), oder?

[Bennie]

Ja richtig.
Wie Du oben schon erwähntest dann eben overflow: visible; vergeben für die Navigation.

[xkoy]

Hi buddla, wie hat du das menu gebaut. Ich brauche auch wie du es hast, beim ipad bleibt das menu auf, bei 1 Klick, genau das brauche ich. hast du die Erweiterung: m17PageFolders benutzt? Was hast du noch gemacht? tpl dazu angepasst. Wäre Dir sehr dankbar!

Daniel