jPanelmenu (Facebook Navigation)

**beasty** · 02.04.2013, 08:55

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.

**Nikolas** · 02.04.2013, 09:15

Hallo,

ich habe auch gerade das jPanel Menü in einer Seite eingebaut. Allerdings ist es nicht notwendig dafür das Seitentemplate anzufassen.

Erstelle dir einfach die beiden Code-Elemente als HTML Code und binde diese im Header ein.
Deinen Menü Trigger kannst du dann auch einfach erst per Media Query einblenden sobald die Seite von einem entsprechenden Gerät aufgerufen wird.

Ein Extra Modul braucht's dafür eigentlich nicht. Ist ja letztendlich nur eine Javascript Datei die eingebunden werden muss.
Der Trigger kann ja immer auch als Inhaltselement oder eben Modul eingebunden werden.

Gruß
Nikolas

P.S.: Das Logo sollte nicht in einen H1 Tag gebettet werden. In den H1 Tag gehört eine gewichtige Überschrift die in direktem Zusammenhang mit dem Inhalt auf der Seite steht. Darüberhinaus darf eine H1 Überschrift auch nur einmal auf einer Seite vorkommen (wg. SEO).

**beasty** · 02.04.2013, 12:34

Vielen Dank für den Tip. Hast Recht. Wie gesagt war der erste Lösungsansatz. Ist ein prima Menu finde ich.

laRocca · 14.11.2013, 08:12

Hallo, wollte das Thema nochmal aufgreifen,w eil ich das Menü gerne verwenden würde –*ich kriegs aber nicht eingebunden und die Anleitung oben ist nicht mehr verfügbar.
Hat jemand mal ne kurze Zusammenfassung für mich, wie ich das Teil genau einbaue?

**Nikolas** · 19.11.2013, 07:05

Zitat von laRocca

Hallo, wollte das Thema nochmal aufgreifen,w eil ich das Menü gerne verwenden würde –*ich kriegs aber nicht eingebunden und die Anleitung oben ist nicht mehr verfügbar.
Hat jemand mal ne kurze Zusammenfassung für mich, wie ich das Teil genau einbaue?

1. jPanel Javascript Datei herunterladen und in der Dateiverwaltung hochladen
2. Eigenes Modul "HTML" für den Menüaufruf erstellen, z.B.:

HTML-Code:

<a href="#" class="menu-trigger">Menü</a>

3. Das Modul an der gewünschten Stelle in das gewünschte Seitenlayout einbinden
4.

HTML-Code:

<script src="pfad/zu/der/jPanel/Javascriptdatei.js"></script>

in das Seitenlayout per zusätzliche Header Tags oder zusätzlicher Javascript Code einbinden
5. Eigene optische Anpassungen per CSS

Ich hoffe das ist verständlich und ich habe nichts vergessen.

Gruß
Nikolas

laRocca · 19.11.2013, 08:07

aber muss das nicht nochmal die navi beinhalten? dieser toggle-button?

also aktuell sieht das teil mit deiner anleitung und dem restlichen CSS aus dem github projekt zum test so aus: http://www.reindesign.eu/mobile.html

**Nikolas** · 19.11.2013, 08:29

Zitat von laRocca

aber muss das nicht nochmal die navi beinhalten? dieser toggle-button?

also aktuell sieht das teil mit deiner anleitung und dem restlichen CSS aus dem github projekt zum test so aus: http://www.reindesign.eu/mobile.html

Natürlich hatte ich was vergessen

Das jPanelmenu muss natürlich noch initialisiert werden, z.B. in dem Seitenlayout unter zusätzlicher Javascript Code:

HTML-Code:

<script>
  var jPM = $.jPanelMenu({
      menu: '#deineNavigationsID'
  });
  jPM.on();
</script>

Zum Verständnis:
Das jPanelmenu Skript generiert aus deinem eigentlichen Standard Seitenmenü ein eigenes Menü und baut dieses dann in den DOM ein.
Das eigentliche Menü könntest du dann per CSS einfach ausblenden sobald das jPanelmenu aktiv ist.

Gruß
Nikolas

laRocca · 19.11.2013, 08:34

1000 DANK!!! ES FUNKTONIERT!!!

**c0CoKabAnA** · 19.11.2013, 13:28

Hallo,

ich habe mich jetzt nach dieser eifnachen Anleitung auch mal drann gewagt...
Leider ohne Erfolg =(
Ich hab alles so gemacht wie in der Anleitung aber irgendwie klappt es nicht.
Ich Teste das alles Lokal drum kann ich keinen Link postet.
Hier mal die wichtigsten sachen:

Code:

<head>
    <script src="http://localhost/contao3_update/files/script/jquery.jpanelmenu.min.js"></script>
</head>

<body>
<div id="wrapper">
     <header id="header">
        <div class="inside">
              <a href="#" class="menu-trigger">Menü</a>        
        </div>
     </header>

    <aside id="left">
          <div class="inside">
               <!-- indexer::stop -->
               <nav class="mod_navigation block" id="navigation">
...
               </nav>
          </div>
     <aside>

     <script>
          var jPM = $.jPanelMenu({
              menu: '#navigation'
          });
          jPM.on();
     </script>

</body>

Hab ich noch irgendwo was vergessen?
Wenn ich auf den Menü Link klicke ändert sich die URL zu "/#" aber sonst passiert gar nichts =(

MfG

**Nikolas** · 19.11.2013, 15:06

Zitat von c0CoKabAnA

Hallo,

ich habe mich jetzt nach dieser eifnachen Anleitung auch mal drann gewagt...
Leider ohne Erfolg =(
Ich hab alles so gemacht wie in der Anleitung aber irgendwie klappt es nicht.
Ich Teste das alles Lokal drum kann ich keinen Link postet.
Hier mal die wichtigsten sachen:

Code:

<head>
    <script src="http://localhost/contao3_update/files/script/jquery.jpanelmenu.min.js"></script>
</head>

<body>
<div id="wrapper">
     <header id="header">
        <div class="inside">
              <a href="#" class="menu-trigger">Menü</a>        
        </div>
     </header>

    <aside id="left">
          <div class="inside">
               <!-- indexer::stop -->
               <nav class="mod_navigation block" id="navigation">
...
               </nav>
          </div>
     <aside>

     <script>
          var jPM = $.jPanelMenu({
              menu: '#navigation'
          });
          jPM.on();
     </script>

</body>

Hab ich noch irgendwo was vergessen?
Wenn ich auf den Menü Link klicke ändert sich die URL zu "/#" aber sonst passiert gar nichts =(

MfG

Hast du eventuell vergessen jQuery selbst in das Seitenlayout einzubinden?

Gruß
Nikolas

**c0CoKabAnA** · 19.11.2013, 15:23

schande über mein haupt... ja das hatte ich vergessen...

Vielen Dank =)

laRocca · 20.11.2013, 09:02

hallo, ich hab noch eine frage dazu
http://www.reindesign.eu/mobile.html

wenn ich jetzt das menü ausklappe und darin scrollen will, was ja der fall ist wenn ich das smartphone landscape halte, dann geht es direkt weg und ich muss das menü nochmal öffnen. Gibt es da ne möglichkeit das im script einzustellen, dass es das nicht macht?

lg

**schumja** · 04.03.2014, 20:25

Ich nutze das jPanel Menü auf einer Homepage, habe aber das Problem, dass das Menü beim Laden der Siete einmal kurz aufflackert.
Hat jemand eine Idee woran das liegen kann?

Ich habe schon versucht das Menü, wenn es nicht benötigt wird per css zu verschieben, aber ich habe den Eindruck, dass das von Skript selbst überschrieben wird.

Link zur Seite

**schumja** · 10.03.2014, 20:29

Zitat von schumja

Ich nutze das jPanel Menü auf einer Homepage, habe aber das Problem, dass das Menü beim Laden der Siete einmal kurz aufflackert.
Hat jemand eine Idee woran das liegen kann?

Ich habe schon versucht das Menü, wenn es nicht benötigt wird per css zu verschieben, aber ich habe den Eindruck, dass das von Skript selbst überschrieben wird.

Link zur Seite

Hat niemand eine Idee?

**Sabine14** · 06.04.2014, 14:20

Hallo,

wie bringt man jetzt das Menu dazu, Submenus (2 Ebenen) anzuzeigen?

Contao 3.2.8 und Superfish als Haupt-Navi.

Ich kann im FF, über Webentwickler, die Level ansprechen (Element display none), aber ich weiß nicht, wie ich sie via Css aktiviere.

Entwicklung -(sorry etwas chaotisch): http://goo.gl/qWXVsM

ich krieg es nicht hin - ich werd mich mal an dem hier versuchen.

Sabine