Mobile Navigation mit Menü-Button zum Ein-Ausklappen der Navigation

**Schnippel** · 15.01.2019, 15:05

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?

**folkfreund** · 15.01.2019, 16:09

Ist es dir wichtig, dass das ohne Javascript funktioniert?

**Schnippel** · 15.01.2019, 18:41

Wenn es ohne JS geht?

Geht es auch mit jQuery? Toggle?

**folkfreund** · 16.01.2019, 11:18

Ich frage weil deine Lösung ohne Javascript auskommt - du setzt aber für anderes jQuery auf der Seite ein. Hatte ich nicht gesehen.

Aber jetzt hab ich verstanden, wie das bei dir funktioniert:

im Quellcode besitzt der tag <html> die id "menu", beide Menü-Links rufen also exakt dasselbe auf
im CSS gibt es Selektoren der Form #menu:target, die dann greifen, wenn die Seite per URL#menu aufgerufen wurde
durch diese CSS Einträge werden das Menü selbst und auch die beiden unterschiedlichen Buttons sichtbar bzw. versteckt

Vorteil: das funktioniert tatsächlich ohne Javascript, bedingt aber ein Nachladen der Seite, damit das #menu aus dem Request wieder verschwindet.

Eine Idee, von der ich nicht weiß ob sie funktioniert:
ändere den Code mal auf

HTML-Code:

<div class="menubutton">
    <a href="{{env::request}}#menu" class="shownav">Menü</a>
    <a href="{{env::request}}#header" class="hidenav">Menü</a>    
</div>

Vielleicht ruft dann der Browser die Seite nicht neu auf, sondern springt nur zu dem anderen Anker.