Hi Leute,
ich hab mobile Navigationen bisher mit einem Menü-Button (Hamburger-Symbol) nach der Anleitung im dicken Contao-Buch von Peter Müller gebaut.
Ein Beispiel ist hier zu sehen:
Unbenannt-2.jpg
Wenn man auf den Hamburger klickt, geht das Navigationsmenü auf.
Beim Schließen wird die Seite wieder neu aufgebaut, was den Nachteil mit sich bringt, daß man immer warten muß.
Wie lässt sich das Ganze schneller realisieren?
Hier der bisherige Aufbau:
Modul angelegt und im BE eingebunden. Das Modul enthält Folgendes:
Code:
<div class="menubutton">
<a href="{{env::request}}#menu" class="shownav">Menü</a>
<a href="{{env::request}}" class="hidenav">Menü</a>
</div>
In den Templates habe ich ein neues Template fe_page.html5 erstellt und oben den Code eingefügt:
PHP-Code:
<?php /* <html> bekommt id="menu" */ ?>
<html lang="<?php echo $this->language; ?>" id="menu">
Der CSS-Code schaut dann so hier aus:
Code:
/*Desktop-Navigation erstmal ausblenden*/
#Navileiste nav.mod_navigation {
max-height:0; /*damit das Ein-und Ausklappen am MENU-Button funktioniert*/
}
/* Höhe Navifenster bei aufgeklappten Menü-Button */
#menu:target nav.mod_navigation {
max-height:60rem; /*ggf. anpassen; Bereich der Navigationspunkte bei aufgeklappten Fenster*/
}
/*Austausch der Menü-Buttons*/
#menu:target a.shownav { display:none; }
#menu:target a.hidenav { display:block;}
/*--- Positionierung des Menü-Buttons---*/
div.menubutton {
position:absolute;
right:0;
top:0.8rem; /* evtl. anpassen, wenn im Weg bei aufgeklapptem Menü*/
display:block;
z-index:10;
}
Wie muß man das Ganze umbauen, damit beim Schließen der Navigation nicht immer die Seite neu geladen wird?
Mobile Navigation mit Menü-Button zum Ein-Ausklappen der Navigation
Zitieren
