Hallo
Ich habe ein kleines Tutorial für eine Facebookartige Navigation erstellt. Basis ist das jPanel Menu von : http://jpanelmenu.com/ .
Mag sein das dies alles etwas wackelig ist, aber es funktioniert gut. Vielleicht findet sich ja wer der ein anständiges Modul daraus macht.
Alle Daten und das Tutorial unter http://sreimann.com/nleser/items/jpa...er-contao.html
Hier nun mein Tutorial:
Hallo
Für mobile Webseiten bzw. responsives Design, stellt sich immer die Frage nach einer eleganten Lösung für eine Navigation.
Nicht immer eignet sich eine horizontale oder vertikale Navigation für kleine Bildschirme. Gerade wenn mehrere Untermenüpunkte dargestellt werden sollen.
Einen guter Lösungsansatz finde ich ist das jPanel Menü. Ähnlich wie die mobile Navigation bei Google oder Facebook, schiebt diese Navigation, den gesamten Content Bereich beiseite und macht Platz für die Navigation.
Eine ausführliche Dokumentation des Scripts sowie eine Demo findet man unter http://www.jpanelmenu.com .
Genau das wolle ich nun auch für für mein CMS System Contao umsetzen. Die Einbindung stellte sich letztlich als ziemlich einfach dar. Mag sein das mein Ansatz etwas wackelig ist, doch er funktioniert ganz gut.
Hier also mein Vorgehen:
Alle Daten stehen auch zum Download bereit
Schritt 1:
Anlegen eines zusätzlichen Seitentemplates. Dazu habe ich im Headerbereich zwei zusätzliche Punkte eingefügt.
<h1 class="logo"><a href="index.html" class="ss-list">moessinger-ing.de</a></h1><a href="index.html" class="ss-list">test.de</a></h1>
und
<a href="#menu" class="menu-trigger ss-icon"></a>
Die Beiden Punkte sind für die Navigationsleiste des Menüs.
Dann wird noch über Contao ein normales Navigationsmodul eingefügt und im Backend bei Moduleinstellungen die ID „navi“ vergeben.
Alternativ kann jede beliebige id vergeben werden, muss dann aber im script selbst angepasst werden.
Der letzte Schritt ist dann nur noch, dass script einzubinden und das Seitentemplate zu aktivieren fertig.
Ich hoffe die Anleitung hilft. Auf Verbesserungen bin ich gespannt.
Lesezeichen