Mobile Navigation über einzelnen Button

**Gundel** · 18.04.2016, 11:44

Hallo Leute

Ich hab da mal ne Frage. Ich hab ein wenig rumgestöbert im Forum aber ich hab immer noch Fragezeichen.
Ich hab eine Site gebaut, die funktioniert. Und nun möchte ich sie mit Media Queries für mobile Endgeräte anpassen.
Da möchte ich die Navigation ausblenden und nur diesen typischen Button mit den drei Strichen haben, und die Navigation wird erst angezeigt, wenn man drauf drückt (oder klickt). Wie wird sowas grundsätzlich gelöst? Gibt es in Contao eine Möglichkeit, das zu machen oder brauche ich da ein jQuery Script? Oder eine Erweiterung?

Vielen Dank und Grüsse

Gundel

**Spooky** · 18.04.2016, 11:46

Du könntest die dk_mmenu Extension für mobile Menüs verwenden.

**Andreas** · 18.04.2016, 19:14

Zitat von Gundel

Wie wird sowas grundsätzlich gelöst?

Grundsätzlich:
CSS

HTML-Code:

myMediaQuery {
  #myNavigation {
    display: none;
  }
  #myNavigation.geklickt {
    display: block;
  }
}

JS

PHP-Code:


myButton.onclick.myNavigationToggleClass('geklickt');

Das ist nur schematisch. Also Navigation verstecken. Mit JS der Navigation ne Klasse geben (bzw. toggeln - umschalten) wenn man auf den Button klickt, und die Navigation wieder sichtbar machen, wenn sie diese Klasse hat.

**Logo** · 19.04.2016, 05:54

Sieh dir mal die Erweiterung responsive-navigation an. Sie läuft bis Contao 3.58

**Gundel** · 19.04.2016, 18:39

Zitat von Spooky

Du könntest die dk_mmenu Extension für mobile Menüs verwenden.

hallo spooky.
ich hab die erweiterung ausprobiert. und klappt auch soweit.
mein problem ist nun, dass die unterpunkte nicht automatisch angezeigt werden, wenn ich das menu öffne, sondern dass da ein pfeil erscheint, den ich dann anklicken kann.
ich hab das gefühl, dass das untergehen kann und die leute das nicht schnallen. kann ich das gesamte menu von anfang an geöffnet haben?
ich hab nichts dergleichen gefunden in der erweiterung.
danke
Gundel

**Andreas** · 19.04.2016, 21:23

Die ganzen Möglichkeiten von Mmenu kannst du dir hier ansehen http://mmenu.frebsite.nl/ ist allerdings ziemlich mächtig das ganze.

**ktkt** · 11.05.2016, 12:20

Zitat von Gundel

mein problem ist nun, dass die unterpunkte nicht automatisch angezeigt werden, wenn ich das menu öffne, sondern dass da ein pfeil erscheint, den ich dann anklicken kann.
ich hab das gefühl, dass das untergehen kann und die leute das nicht schnallen. kann ich das gesamte menu von anfang an geöffnet haben?

du musst nur dem Überpunkt (also der Seite in der Seitenstruktur) die Klasse "mm-opened" zuweisen. Diese Klasse wird sonst vom Javascript gegeben, wenn das Untermenü ausgeklappt wird.

**Katha5** · 15.06.2016, 09:07

Hallo zusammen,

auch ich versuche mich schon seit einiger Zeit an einer responsiven Seite und versuche mich auch an einer mobile Navigation. Vom Grundgerüst steht sie - habe die Mobile Navigation nach Peter Müller (Contao Handbuch ab 3.3) versucht. Zu meinem Glück fehlt mir jetzt noch statt dem Schriftzug "Menü" als Menübutton das Burgersymbol. Wie binde ich dies ein? Am liebsten hätte ich den Button so wie auf der Seite von contao.org mit dem Menü+Burgerbutton. Ich habe keine Ahnung, wie das geht....
Es wäre toll, wenn mir da jemand helfen könnte...

**Katha5** · 28.06.2016, 19:45

Hallo zusammen,

mein mobiles Menü (unter 767px) lässt sich nicht vollständig ausklappen.
Hat jemand eine Idee, woran das liegt???

Ich verzweifle...
http://www.frauenlob-gymnasium.de/con4/#menu

**Andreas** · 28.06.2016, 21:29

Gibt es diese Seite aus dem Handbuch online? Ansonsten kann ich nicht helfen, zu wenig Infos. Wie steuerst du die Navigation an, dass sie aufklappt?

Validiere auch mal deine Seite, da sind grobe Fehler im Quelltext. Benutze keine Leerzeichen und Sonderzeichen für deine Dateien und Ordner. Am besten auch keine Großbuchstaben. ÄÖÜäöüß sind Sonderzeichen.

Schmeiße auch bitte alles an JS-Scripts raus, was du nicht benötigst, bzw. aktiviere nur das was du benötigst. Brauchst du jQuery und MooTools wirklich gleichzeitig? Brauchst du 3 Lightboxen (die slimbox ist sehr alt)? Hast du sortierbare Tabellen (tablesorter)? Weißt du was Chosen ist, benötigst du das? Brauchst du zwei Akkordeon-Scripte (hast du überhaupt eines im Einsatz)? Überlege dir, welchen Slider du benutzen möchtest, zusätzlich zu den beiden aus dem Core hast du noch den von rocksolid eingebunden. Hast du überhaupt einen Slider im Einsatz? Bist du bei Google-Analytics angemeldet? Wenn ja, dann muss in das Template auch deine ID eingetragen werden.

Dort im Layout einfach alles was JS betrifft anzuhaken ist keine gute Idee.

**Katha5** · 28.06.2016, 23:13

Hallo Andreas,

danke für die vielen Tipps, habe versucht, was ich finden konnte, auszuschalten/ umzubenennen.
Weiß nicht, welche Scripte ich wirklich brauche - habe aber nur den rocksolid-slider im Einsatz und auch keine sortierbaren Tabellen...
Die Fehler im Code habe ich größtenteils beseitigt.

Ich habe mit dem Buch von Peter Müller gearbeitet und eine Navigation für kleine Viewports über php eingerichtet. Habe dazu im template fe_page.html5 einen Php-Kommentar eingefügt, den Button mittels Html-Modul generiert und dann nur über CSS die Navigation erstellt...
Du merkst, ich bin absoluter Laie und kann nur das machen, was ich irgendwo lese

**Andreas** · 29.06.2016, 02:34

Ah, das sieht ja schon viel besser aus, nur den größten (obwohl unbedeutenden) Fehler hast du noch drin gelassen

HTML-Code:

</body>
<html lang="de" id="menu"> 
</html>

Google-Analytics musst du noch rausschmeißen, weil du keine ID eingegeben hast, du musst dazu eine Kopie des Analytic-Templates erstellen.

Ok, das mit dem Aufklappen ist wohl sone CSS :target Lösung. Gib dem .hidenav mal das HREF index.php/unsere-schule.html#top sowie du dem .shownav index.php/unsere-schule.html#menu gegeben hast. Und eine CSS-Angabe musst du ändern

PHP-Code:


#menu:target nav.mod_navigation {

  max-height: 100%; /* vorher 40rem, das reicht nicht für dein Menü */

}

Aktiviere auch mal die .htaccess.default (umbenennen nach .htaccess) und dann im BE die URL-Umschreibung aktivieren, damit das index.php aus der URL verschwindet.

Für die Domain www.frauenlob-gymnasium.de wäre beim Hoster noch eine Weiterleitung auf http://frauenlob-gymnasium.de/ einzurichten. Wenn das dort nicht geht, kann man das auch in der .htaccess machen. In der Adressbar soll immer nur eine Domain stehen.

**Katha5** · 29.06.2016, 07:56

Danke! genau die 40rem waren der Fehler!
Ich habe das href nirgendwo eingegeben :-( ist das notwendig?

leider findet ich den Fehler "stray start tag html" nicht - habe im fe_page template folgenden code eingeben müssen und ihn am Ende hinzugefügt:

HTML-Code:

  <?php /* <html> bekommt id="menu" */ ?>
<html lang="<?php echo $this->language; ?>" id="menu"> 
</html>

Was ist daran falsch? Steht genauso im Buch von Peter Müller...

Die Weiterleitung auf die Hauptseite erfolgt, wenn ich fertig bin - momentan befindet sich dort noch meine alte Seite.
Google-analytics werde ich dann auch vollständig einrichten...

**Andreas** · 29.06.2016, 11:46

Ja, das #top ist wichtig, weil du ohne dieses nicht nur das Menü schließt, sondern die Seite bei jedem Schließen des Menüs neu lädst.

Du solltest auf jeden Fall das fe_page-Template passend zu deiner Contao-Version benutzen. In 3.5.14 steht oben im Template

PHP-Code:


<!DOCTYPE html>

<html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>>

Dort kannst du die ID und deinen Kommentar hinzufügen.

PHP-Code:


<!DOCTYPE html>

<?php 

/**

 * original Template von Contao 3.5.14

 * <html> bekommt id="menu" 

 */ 

?>

<html id="menu" lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>>