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:
- Als erstes laden wir das Modul von der Webseite herunter und entpacken es auf dem lokalen Rechner
- 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)
- In einem Deiner Stylesheets (z.B. bei generellen Formatierungen) musst Du folgenden Code eingeben:
HTML-Code:
.slicknav {
display: none;
}
- Als nächstes legen wir ein neues Template j_slicknav an. Als Basis zum Erstellen nehmen wir j_colorbox.html5 und benennen es um
- 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>
- 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. - 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
