MetaModels Workshop in Berlin
Ergebnis 1 bis 4 von 4

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

  1. #1
    Contao-Fan
    Registriert seit
    12.10.2010.
    Beiträge
    707

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

    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?

  2. #2
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.704

    Standard

    Ist es dir wichtig, dass das ohne Javascript funktioniert?
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

  3. #3
    Contao-Fan
    Registriert seit
    12.10.2010.
    Beiträge
    707

    Standard

    Wenn es ohne JS geht?

    Geht es auch mit jQuery? Toggle?

  4. #4
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Ort
    Dortmund
    Beiträge
    1.704

    Standard

    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.
    www.folkfreun.de - Treffpunkt für Folkmusiker, Folktänzer, Veranstalter und alle Freunde von trad. Folkmusik

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •