Menü für mobile Endgeräte

[magisdesign]

Hallo liebe Gemeinschaft. Ich bin neu hier im Forum und muss für einen Kunden die Webseite responsive machen. Mit @media queries wird es wohl kein Problem geben, aber was ich benötige wäre ein mobiles Menü. Welches Plugin ist hier hilfreich und wie richte ich das ein?

Ich arbeite normal mit Wordpress und kenne mich recht gut mit Joomla aus, aber Contao ist mir ein ganz neuer Begriff. Sieht aber auch sehr nett aus (muss ich mir Mal genauer ansehen)

Ich habe schon ein wenig gegoogelt und kam auf das mmenu. Leider habe ich keine Ahnung, wie ich das einbinden kann, bzw. ob das ein gutes Plugin ist (hab auch schlechte Erfahrungen gelesen)

Bin für jede Hilfe dankbar! ;-)

Mit freundlichen Grüßen,
Ali Elkhaiat

[marcos]

Hallo und willkommen im Contao-Forum
Schön, dass du dich für Contao entschieden hast - eine gute Eintscheidung

Ich habe das mmenu schon oft eingesetzt und bin recht zufrieden damit. Einrichten kannst du es wie folgt:

1. Erweiterung installieren

2. Unter Themes » Frontend-Module das FE-Modul [mmenu - Navigationsmenü] anlegen und nach belieben konfigurieren. Unten links (bei CSS-ID/Klasse) dann eine ID setzen (z.B. mobilenav)

3. Ein neues FE-Modul vom Typ [Eigener HTML-Code] erstellen und folgenden Code einfügen:

<a id="open_mobilenav" href="#mobilenav"></a>

4. Beide FE-Module bei Themes » Seitenlayouts bei Frontend-Module am gewünschten Ort einfügen. Fertig

--> jQuery muss eingebunden sein! (auch bei Themes » Seitenlayouts)

Gruss
Marco

[magisdesign]

Es haben alle Schritte funktioniert, außer der Letzte...

Wie kann ich eine Position festlegen? Ich bin auf "Themes" > "Front End Module des Theme bearbeiten" > bei "Mobiles Menü" (Habe ich so benannt) rechts auf den blauen Pfeil "Modul verschieben"? Wenn ich das anklicke, kommt oben "Legen Sie als Nächstes die (neue) Position des Elements fest" mit einem Pfeil zu einem kleinen Button. Wenn ich da draufklick, passiert gar nichts... Was mache ich falsch?

Vielen Dank.

[KlausGrenoble]

1. Erweiterung installieren

Hast Du da auch die Datenbank upgedated ?

EDIT: ...hast Du wahrscheinlich inzwischen gemacht wie ich sehe.

[magisdesign]

Ja habe ich

[planepix]

Hallo Ali,

nachdem du das Modul (die benötigst zwei) erstellt hast, wechselst du in das Seitenlayout und bindest dort die beiden Module ein (meist in der Spalte „Kopfzeile”).

[magisdesign]

Planepix: Vielen Dank für die Antwort. Jedoch weiß ich nicht, wie man das macht. Ich habe links im Menü die Menüpunkte "Themes", "Seitenstruktur" und "Templates" - Wo muss ich rein und was muss ich da machen. vielen Dank.

Ich habe mich schon durchgeklickt, aber keine Option gefunden, wo ich die Positionen der beiden Module festlegen kann.

[KlausGrenoble]

4. Beide FE-Module bei Themes » Seitenlayouts bei Frontend-Module am gewünschten Ort einfügen.

Genau lesen !

EDIT: Und immer ruhig Blut !

[planepix]

Hallo Ali,

da gehst du auf Themes -> Seitenlayouts. Dann hast du den Ausschnitt des zweiten Screenshots.
Dort platzierst du die zwei Module.

Hier hat die geschätzte Kollegin ein Blogbeitrag dazu geschrieben:
http://www.frische-zitronen.de/2013/...ue-fur-contao/

[magisdesign]

Genau lesen !

Die zitierte Option gibt es bei mir nicht wortwörtlich.

[KlausGrenoble]

Hallo Ali,
da gehst du auf Themes -> Seitenlayouts. dann hast du den Ausschnitt des zweiten Screenshots.
Dort platzierst du die zwei Module.

Genau so !

[magisdesign]

@planepix: Danke hab es nun gefunden! Jetzt habe ich aber das Problem, dass bei mir die beiden Module nicht angezeigt wird. Kann ich die irgendiwe hinzufügen?

Bildschirmfoto 2015-11-19 um 22.39.50.png

Vielen Dank

[planepix]

Prima. Dann weiter:

Du kannst auf eines der grünes Plus-Icons klicken, also ein weiteres Modul einbinden.
Dann stehen dir in der linken Auswahl alle Module zur Auswahl, daneben wählst du die Spalte in der die Module ausgegeben werden sollen.

[KlausGrenoble]

Eine der Zeilen kopieren (auf's grüne Kreuz klicken) und das Modul wählen.

EDIT: naja...

[magisdesign]

Super vielen Dank für Eure Hilfe. Ich habe nun alles eingestellt, aber Menü wird keines angezeigt. Woran kann das liegen?

Vielen Dank

[tab]

Du musst die Module natürlich zunächst erst einmal erzeugen. Das machst du unter Themes->Frontendmodule (das Symbol links von den Seitenlayouts).

[planepix]

Untersuch einmal den Quellcode mit dem Code-Inspektor, ob der Code für das mmenu ausgegeben wird.

Jetzt benötigst du noch das CSS dazu.
Das sich das normale Menü ab einer bestimmten Viewportbreite ausblendet und das mmenu einblendet (Stichwort Mediaqueries).

[magisdesign]

Im Quellcode wird es angezeigt! ;-)

<nav class="mod_mmenu invisible block" id="mobilenav">

ab media queries kenn ich mich aus. Ich möchte nur mal sehen, dass das Menü irgendwo (in welcher Form auch immer) angezeigt wird... (Wo kann ich zB ein Logo reinstellen? Im CSS?)

Danke

[planepix]

Hast du wie Marco geschrieben hat ( https://community.contao.org/de/show...l=1#post391261 ) beide Module erstellt und beide eingebunden im Seitenlayout?

Dann kannst du zum Testen einfach mal „Menü” hier dazuschreiben:

<a id="open_mobilenav" href="#mobilenav">Menü</a>

Dann solltest du auch „Menü” irgendwo sehen.

[magisdesign]

Jawoll! Ich sehe es.

Recht herzlichen Dank für Eure Hilfe!

[marcos]

Hier noch ne hübsche Hamburger-Navigation

FE-Modul [Eigener HTML-Code] wie folgt anpassen (<span> hinzufügen):

<a id="open_mobilenav" href="#mobilenav"><span></span></a>

...und folgenden CSS-Code in deine CSS einfügen:

#open_mobilenav {
    display: none;
    height: 36px;
    margin: 20px;
    position: absolute;
    width: 40px;
    z-index: 2;
}

#open_mobilenav span {
    margin-top: -3px;
    top: 50%;
}

#open_mobilenav::before {
    top: 5px;
}

#open_mobilenav::after {
    bottom: 5px;
}	
	
#open_mobilenav::before,
#open_mobilenav::after,
#open_mobilenav span {
    background: #fff none repeat scroll 0 0;
    content: "";
    display: block;
    height: 6px;
    left: 5px;
    position: absolute;
    width: 30px;

    transition-delay: 0.5s;
    transition-duration: 0.5s;
    transition-property: transform, top, bottom, left, opacity;
    transition-timing-function: ease;
}


/* Ab einer gewissen Breite die Hauptnavigation ausblenden und die Hamburger-Navigation einblenden */
@media screen and (max-width: 599px) {

	.mod_navigation {
		display: none;
	}
	#open_mobilenav {
		display: block;
	}

}

Gruss
Marco