So, ich habe mal eine kleine Dokumentation vorbereitet, wie man mobile_menu einbinden kann.
Bei diesem Beispiel hatte ich folgende Voraussetzungen:
- Standard-Menü ist ein horizontales Menü mit drei Ebenen
- Das mobile Menü soll ebenfalls alle drei Ebenen anzeigen, wobei alle Menüpunkte auch auswählbar sind (Haupt- und Untermenü-Punkte)
- Das horizontale Menü wird bei Unterschreitung von 991px Breite durch das mobile Menü ersetzt (Hamburger-Menü)
1. Installation mobile_menu über den Contao Manager
Bildschirmfoto 2017-09-29 um 17.33.16.png
2. Anlage eines neuen Menü-Moduls mit meinen Werten und Einstellungen als Beispiel:
Bildschirmfoto 2017-09-29 um 17.13.23.png
- Titel und Typ:
-- Modultyp: Mobile Menu
-- Titel: z.B. Navigation - Main Mobile Menu
- Modul-Konfiguration:
- Trigger Inhalt: z.B.: <div id="mobile_trigger"><i class="fa fa-bars" aria-hidden="true"></i> Menü</div>
- Menu Inhalt: Was soll im mobilen Menü erscheinen? Hier kannst Du unterschiedlichste Inhalte einbinden und dann anzeigen lassen, z.B.:
{{insert_module::25}} --> Modul mit HTML Code für Menü Titelleiste, z.B. "Menü" + Kunden- oder Website-Name
Bildschirmfoto 2017-09-29 um 17.15.21.png
{{insert_module::21}} --> Navigation - Main Menu (bei mir eine Horizontale Navigation mit 3 Ebenen)
{{insert_module::24}} --> Modul mit HTML Code für Menü Footer, z.B. Kundenadresse
Bildschirmfoto 2017-09-29 um 17.17.43.png
- Display-Settings / deutsch: Anzeige-Einstellungen:
-- "Auf Smartphones anzeigen" und / oder "Auf Tablets anzeigen" auswählen
-- Custom breakpoint (px) / deutsch: Individueller Breakpoint (px)
Wenn Du einen individuellen Breakpoint setzen möchtest, überschreibt dieser Wert die Werte bei "Auf Smartphone anzeigen" und "Auf Tablet anzeigen"
Bildschirmfoto 2017-09-29 um 17.14.21.png
-- Make parent items work as toggler only / deutsch: Eltern-Menüpunkte nur als Toggler verwenden
Aktivieren, wenn Menüpunkte mit Untermenüpunkten nur als Toggler für die Unterseiten-Anzeige dienen und nicht direkt auswählbar sein sollen
-- Disable collabsible navigation / deutsch:Navigation standardmäßig ausklappen
Soll die Navigation standardmäßig komplett über alle Ebenen ausgeklappt sein, muss hier der Haken gesetzt sein
-- Close menu on link click / deutsch: Menü schließen, wenn Link angeklickt
Schließen des mobilen Menüs, wenn ein Link angeklickt wird
- Design-Settings / deutsch: Gestaltungs-Einstellungen:
-- Position: Links, Rechts, Oben, Unten
-- Custom menu size (%) / deutsch: Individuelle Menügröße (%)
Hier kann man die individuelle Breite oder Höhe in Prozent angeben
-- Enable the overlay / deutsch: Overlay aktivieren
Mit dieser Einstellungen kann man ein Overlay über den Inhalt legen, sobald das Menü aktiv ist
-- Off canvas effect / deutsch: Off Canvas Effekt
Wenn aktiviert, schiebt der Off Canvas Effekt den Inhalt weg, ansonsten wird der Inhalt überlagert
-- Disable menu shadow / deutsch: Menü-Schatten deaktivieren
Deaktiviert den Standard-Menu-Schatten
-- Animation speed (ms) / deutsch: Animationsgeschwindigkeit (ms)
Hier kannst Du die Animationsgeschwindigkeit in ms setzen (1000ms = 1 Sekunde)
3. Nun muss das Modul noch in das entsprechende Seitenlayout eingebunden werden. Ich habe das neue Modul direkt unter dem normalen Menü-Modul in die Kopfzeile eingebunden:
Bildschirmfoto 2017-09-29 um 17.12.40.png
4. CSS
Ich habe (mit Hilfe von Bjarke Ammann) folgendes CSS verwendet und noch erweitert:
Code:
/*
* ==============================================
* Mobile Menu
* ==============================================
*/
@media only screen and (max-width: 991px){
#header .mod_navigation
{
display: none;
}
#mobile_trigger {
color: white;
cursor: pointer;
font-size: 1rem;
}
.mod_mobile_menu {
background-color: #BE1E2D;
margin-bottom: 15px;
padding: 10px 15px;
width: 100%;
z-index: 100;
}
.mobile_menu .inner {
background-color: #BE1E2D;
color: #4c4d4b;
}
.mobile_menu .inner .ce_text {
line-height: 1.5;
padding: 10px 15px;
}
.mobile_menu .logo img {
padding: 10px;
}
.mobile_menu .mod_navigation {
clear: both;
margin: 20px 0;
}
.mobile_menu .mod_navigation ul {
margin: 0;
padding: 0;
}
.mobile_menu .mod_navigation ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
.mobile_menu .mod_navigation a,
.mobile_menu .mod_navigation strong {
border-bottom: 1px solid #B5A142;
color: white;
display: block;
font-size: 16px;
padding: 12px 15px;
text-decoration: none;
}
.mobile_menu .mod_navigation a.first,
.mobile_menu .mod_navigation strong.first {
border-top: 1px solid #B5A142;
}
.mobile_menu .mod_navigation a:focus, .mobile_menu .mod_navigation a:hover {
color: white;
background: #B5A142;
}
.mobile_menu .mod_navigation a.trail:focus, .mobile_menu .mod_navigation a.trail:hover {
color: #ffffff;
}
.mobile_menu .mod_navigation .active,
.mobile_menu .mod_navigation .trail {
background-color: #B5A142;
color: #ffffff;
font-weight: bold;
}
.mobile_menu .mod_navigation .level_2 a,
.mobile_menu .mod_navigation .level_2 strong {
background-color: #929497;
padding-left: 45px;
text-decoration: none;
font-weight: normal;
}
.mobile_menu .mod_navigation .level_2 a.first,
.mobile_menu .mod_navigation .level_2 strong.first {
border-top: 0;
}
.mobile_menu .mod_navigation .level_2 a:focus, .mobile_menu .mod_navigation .level_2 a:hover {
color: white;
background: #B5A142;
}
.mobile_menu .mod_navigation .level_2 a.trail:focus, .mobile_menu .mod_navigation .level_2 a.trail:hover {
color: #ffffff;
}
.mobile_menu .mod_navigation .level_2 .active,
.mobile_menu .mod_navigation .level_2 .trail {
color: white;
background: #B5A142;
font-weight: bold;
}
.mobile_menu .mod_navigation .level_3 a,
.mobile_menu .mod_navigation .level_3 strong {
background-color: white;
color: black;
padding-left: 75px;
text-decoration: none;
}
.mobile_menu .mod_navigation .level_3 a.first,
.mobile_menu .mod_navigation .level_3 strong.first {
border-top: 0;
}
.mobile_menu .mod_navigation .level_3 a:focus, .mobile_menu .mod_navigation .level_3 a:hover {
color: white;
background: #B5A142;
}
.mobile_menu .mod_navigation .level_3 a.trail:focus, .mobile_menu .mod_navigation .level_3 a.trail:hover {
color: #ffffff;
}
.mobile_menu .mod_navigation .level_3 .active,
.mobile_menu .mod_navigation .level_3 .trail {
color: white;
background: #B5A142;
font-weight: bold;
}
.navi_title
{
color: white;
text-align: center;
}
.navi_footer
{
color: white;
text-align: center;
}
}
Somit erhalte ich folgende Ausgabe:
Mein ursprüngliches horizontales Menü:
Bildschirmfoto 2017-09-29 um 17.58.59.png
Mein mobiles Menü:
Das Hamburger-Menü:
Bildschirmfoto 2017-09-29 um 18.01.00.png
Menü-Titel:
Bildschirmfoto 2017-09-29 um 18.01.58.png
Mobiles Menü:
Bildschirmfoto 2017-09-29 um 18.02.49.png
Menü-Footer:
Bildschirmfoto 2017-09-29 um 18.04.01.png
Ich hoffe, dass diese Anleitung verständlich rüberkommt und freue mich auf Eure Reaktionen...