Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Joachim,
installiert hast du mobile_menu erfolgreich?
So wie im Anhang sieht mein Setup für das Modul aus.
Ich habe ein weiteres Navigationsmodul erstellt, welches ich für die mobile Navigation verwende -> wird dann im Feld „Menu Inhalt” als Modul via Inserttag eingebunden. Somit kannst du dein mobiles Menü dort konfigurieren. Das Modul ”Mobiles Menü” ist quasi ein Platzhalter – für das Menü etc.
Kamil hat auf seiner Website ja auch die Setupschritte drin; du kannst hier z.B. auch noch eine Suche einbauen oder SocialMedia-Icons mit Links und viel mehr.
Man kann auch das bestehende Modul für die Navigation der Desktopansicht via Inserttag in das Modul „Mobiles Menü” einbauen; dann muss man aber das CSS wieder speziell ansteuern… Daher ein neues Modul und eine eigene CSS-ID dafür. Dann kannst du die mobile Navigation via CSS gestalten.
Besser verständlich?
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Ich würde dann nach erfolgreichem Einbau von mobile_menu auch eine Dokumentation dafür schreiben...
Das würde mich auch interessieren. :-)
Frage:
Wenn ich mir den HTML-Code auf der mobile_menu-Seite anschaue, finde ich die Navigation 2 x eingebunden.
Einmal im Wrapper unter Header > Bottom als <nav id="mainmenu" class="mod_navigation block">,
und dann nochmal in einem DIV unterhalb des Wrappers. (siehe Bild).
Anhang 19893
Lässt sich das Ganze auch mit nur einer Einbindung realisieren, bei der man mit Hilfe von BreakePoints Ansichten in SMALL (für kleine Bildschirme) und LARGE (für Desktop) erstellt?
Liste der Anhänge anzeigen (Anzahl: 2)
Danke für die Anregungen und Hilfestellungen. Ich habe es schließlich mit Bjarkes Unterstützung hinbekommen.
Ich frage noch mal bei Bjarke nach, ob ich seine Anregungen mit meinen Änderungen für eine Doku nutzen kann und würde dann die Doku in diesen Beitrag schreiben oder als eigenständige Doku hier anhängen.
Hier schon mal zwei Screenshots der beiden Navigationen:
Horizontale Navigation mit drei Ebenen:
Anhang 19897
Mobile Navigation mit drei Ebenen:
Anhang 19898
Ist eigentlich ganz einfach, wenn man weiß, wie's geht... ;)
DANKE ALLEN!!
Liste der Anhänge anzeigen (Anzahl: 11)
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
Anhang 19911
2. Anlage eines neuen Menü-Moduls mit meinen Werten und Einstellungen als Beispiel:
Anhang 19912
- 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
Anhang 19915
{{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
Anhang 19916
- 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"
Anhang 19913
-- 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:
Anhang 19914
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ü:
Anhang 19917
Mein mobiles Menü:
Das Hamburger-Menü:
Anhang 19918
Menü-Titel:
Anhang 19921
Mobiles Menü:
Anhang 19922
Menü-Footer:
Anhang 19923
Ich hoffe, dass diese Anleitung verständlich rüberkommt und freue mich auf Eure Reaktionen... ;)
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo Andreas,
danke für die Anregung mit den Inhaltselementen. Habe ich gerade mal ausprobiert, geht natürlich genauso:
Anhang 19930
Aber Kamil schreibt ja selbst (kann man natürlich auch missverstehen, ob das nun Module oder CE sein sollen):
Zitat:
Create then the necessary modules and write down their IDs - they are mandatory for the insert tag.
Wäre die Anleitung auf Kamils Seite vollständig, hätte ich mir nicht die Mühe gemacht, noch einmal alles zu dokumentieren. Aber das ist sie leider nicht und deshalb habe ich mich bei der Einbindung schwer getan. Deswegen habe ich noch etwas detaillierter dokumentiert und auch mehr Screenshots hinterlegt.
Da ich gerade dabei war, habe ich die deutsche Übersetzung auch gleich mal vervollständigt, die dann lt. Kamil auch in der Version 2.7.0 dabei sein wird... ;)
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Andreas, sehr toll, Dicken Dank fürs Teilen dieser der CSS-Eigentschaften um nun alle Navigationen mit dem mobile_menu abbilden zu können, das ist echt toll, da kommt Freude auf.
Zitat:
Zitat von
Andreas
ps Wenn man das gleiche Mobile Menu auch für die Desktop-Ansicht benutzen möchte, dann gibt es ein paar CSS-Eigenschaften, welche man resetten muss. Mal als Beispiel:
PHP-Code:
@media (min-width: 960px) {
#wrapper {
padding-top: 80px;
}
.mobile_menu {
width: 100% !important;
height: auto !important;
transform: none !important;
display: block !important;
/* position: relative; */
}
.mobile_menu .inner {
height: auto;
overflow: visible;
}
.mm-close {
display: none;
}
.subnav li {
float: left;
}
.subnav li.submenu_hide > ul {
display: none;
}
.subnav ul ul {
position: absolute;
left: 0;
}
}
ich habe zum Testen mal deinen Ansatz so übernommen,
nur ein Problem habe ich noch
edit: URL entfernt
es klappt nicht zu:o Shame on me
in meinen Display-Settings ist Close menu on Click aktiv
was habe ich wohl übersehen?
Doro
Liste der Anhänge anzeigen (Anzahl: 1)
mmmh - ok, ich verstehe es trotzdem nicht. Das Menü klappt doch zu.
schau dir mal meinen screenshot an:
Anhang 20216
das dritte Bild rechts ist der Zustand, nachdem ich auf den Link 'Rundgang' aus dem zweiten Bild geklickt habe » geschlossen.
Gleiches Verhalten wenn, ich auf einen der Untermenüpunkte von 'Unser Angebot' klicke
Oder verstehe ich das Problem nicht? :rolleyes:
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
jscholtysik
Deswegen habe ich noch etwas detaillierter dokumentiert und auch mehr Screenshots hinterlegt.
Das hast du auch super gemacht (genauso super sind natürlich auch mal wieder die Hinweise von Andreas und planepix). Spannend wäre noch die Frage, an welcher Stelle man im css solche angle-down(s) (z.b. FontAwesome) für level 1 aus dem Beispiel-Screenshot wie integriert. Dafür bin ich dann auch zu doof..
Hat jemand 'nen Tipp?
Anhang 22517
Liste der Anhänge anzeigen (Anzahl: 2)
Super - vielen Dank!!
Bezogen auf jscholtysiks Beispiel würde das dann ergeben:
Code:
.mod_navigation .submenu_show > a::after,
.mod_navigation .submenu_show > strong::after {
transform: rotate(90deg);
}
.mod_navigation .submenu > a::after,
.mod_navigation .submenu > strong::after {
right:1em;
position:absolute;
content: '>';
}
Es funktioniert soweit...das Problem ist nur, dass sich beim Scrollen die Pfeile mit verschieben (s. 2) :
Anhang 22533
Anhang 22534
Was hab' ich da vergessen? Ich komm' nicht drauf...
Liste der Anhänge anzeigen (Anzahl: 1)
mobile_menu - Submenus mit Animation öffnen
Hallo,
ich habe in meinem aktuellen Projekt das mobile_menu eingebunden. Es funktioniert soweit auch alles super. Ich habe das Menu auch so gestyled, dass es in der Desktopansicht als "großes" horizontales DropDown geht.
Was mir nicht gelingen will ist, dass die Listen ab level_2 animiert geöffnet werden. Also jetzt klicke ich auf einen Link in der ersten Ebene (level_1) und das Submenu (level_2) wird einfach eingeblendet. Ich möchte da gern eine Animation (Fade in). Ist das möglich?
Hier ein animiertes GIF vom Projekt: Anhang 22948
Danke.
Steffen
