Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: Mobile Navigation slicknav einbauen

  1. #1
    Contao-Fan
    Registriert seit
    21.02.2010.
    Beiträge
    306

    Standard Mobile Navigation slicknav einbauen

    Problemstellung:
    Ich will mit recht einfachen Mitteln eine Navigation für mobile Endgeräte machen, also meine Seite responsive machen.

    Lösung:
    Das jQuery-Plugin Slicknav (http://slicknav.com/) hilft Dir dabei und ist mit recht einfachen Mitteln in Contao einzubauen.

    Lösungsschritte:
    1. Als erstes laden wir das Modul von der Webseite herunter und entpacken es auf dem lokalen Rechner
    2. Aus diesem Archiv brauchen wir jquery.slicknav.min.js und slicknav.css. Beide Dateien laden wir auf unsere Contao-Installation hoch (das eigentliche Plugin z.B. nach files/themes/js, die CSS-Datei z.B. nach files/theme/css)
    3. In einem Deiner Stylesheets (z.B. bei generellen Formatierungen) musst Du folgenden Code eingeben:
      HTML-Code:
      .slicknav {
       display: none;
      }
    4. Als nächstes legen wir ein neues Template j_slicknav an. Als Basis zum Erstellen nehmen wir j_colorbox.html5 und benennen es um
    5. Wir editieren nun das Template folgendermaßen:
      PHP-Code:
      <?php

      $GLOBALS
      ['TL_CSS'][] = 'files/theme/css/slicknav.css||static';

      ?>

      <script src="files/theme/js/jquery.slicknav.min.js"></script>
      <script type="text/javascript">
        (function($) {
          $(document).ready(function() {
            $(#navbar').slicknav();
          });
        })(jQuery);
      </script>
    6. Um das Menü z.B. auf einem iPhone einzublenden, legen wir entweder ein neues Stylesheet mit einem Media-Query an, oder - wie es mittlerweile mache - binde eine eigene externe CSS-Datei ein, in der alle meine Media-Queries gesammelt stehen. Dort ist folgendes eingetragen:
      HTML-Code:
      @media screen and (min-width: 320px) and (max-width: 400px) {
      	body, html {
      		font-size: 10px;
      	}
      	#navbar {
      		display: none;
      	}
      	.slicknav_menu {
      		display: block;
      	}
      }
      #navbar ist bei mir ein eigener Layoutbereich, in der ich die Navigation untergebracht habe. Es geht hier eigentlich jeder Wert, es sollte nach Möglichkeit eine eindeutige ID sein. Mit einem normalen Tag a lá <nav> habe ich es noch nicht versucht.
    7. Nach einem Reload und dem Resize des Browserfensters sollte nun oben eine eigene Menüleiste erscheinen, dafür verschwindet die normale Navigationsleiste. Diese ist per Default eher Dunkelgrau ausgerichtet. D.h. wir müssen das Aussehen an unsere Webseite anpassen. Das geht mit der Datei slicknav.css. Einfach hier den Code entsprechend ändern, vieles davon ist Trial-and-Error, aber mit der Zeit wird das schon.

    Unter http://slicknav.com sind auch einige Optionen angeführt, wie z.B. der Text, der neben dem Stapel erscheinen soll. Diese kann man recht einfach in dem angelegten Template einfügen.

    Ein funktionierendes Beispiel wäre unter http://www.stocksportevents.info zu sehen (nicht alles auf der Seite ist bereits Responsive, aber ich arbeite an dem Problem ).

    Gruß, Thomas

  2. #2
    Gesperrt
    Registriert seit
    21.03.2013.
    Ort
    Berlin
    Beiträge
    82

    Standard

    Danke für das Tutorial, hast du dir schon das MMenu angeschaut aus den Extensions?
    Ist so ziemlich da selbe glaub ich.

    Gruß

  3. #3
    Contao-Nutzer
    Registriert seit
    13.08.2013.
    Beiträge
    63

    Standard

    Hallo zusammen,

    ich habe versucht diese Navigation in meine Seite einzubauen und habe nach dem Tutorial gearbeitet, nur leider erscheint der Navigationscontainer slicknav_menu in meinem Quelltext nicht.

    Kann mir eventuell bitte jemand helfen?

    Falls ihr weitere Infos oder einen Link braucht, sagt bitte Bescheid.

    Vielen Dank im Voraus

    Gruß Armin

  4. #4
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Das oben beschriebene Vorgehen bindet nur das CSS und JS ein. Eine HTML-Navigation mußt Du selbst allegen, die dann davon beeinflusst wird.
    Alternativ kann man natürlich auch die "normale" Navigation nehmen, die dann per mediaquery für kleine Geräte das slicknav-CSS nimmt und bei größeren Geräten dann anders formatiert wird.
    Geändert von Samuell (16.02.2016 um 10:09 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    13.08.2013.
    Beiträge
    63

    Standard

    Hallo nochmal,

    hab den Fehler gefunden.

    im Template-Script fehlte ein '.

    Vielen Dank für das super gute Tutorial.

    Beste Grüße

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
  •