[ERLEDIGT] Ausklappbare Sidebar bei mobilen Auflösungen

dn3d_fanboy · 11.01.2016

Mahlzeit zusammen,

ich habe ein kleines Problem bei der responsive Umsetzung eines selbst erstellten WordPress-Themes. Und zwar hat dieses Theme links neben dem Content eine Sidebar.

Nun möchte ich, dass diese Sidebar bei der Smartphone-Auflösung, bzw. bei einer Fensterbreite von 800px und kleiner nicht sichtbar ist, sondern stattdessen ein Button zum Ausklappen der Sidebar erscheint.

Mit Klick/Drücken auf den Button soll dann die Sidebar über den Content fahren.

Ich weiß, dass sowas mit Javascript möglich ist, nur habe ich nicht die leiseste Ahnung, wonach ich überhaupt suchen soll. Vielleicht kann mir hier jemand helfen. Optimal wäre ein jQuery-Plugin/Script, das ich hardcodiert einfügen kann.

Ich hoffe mir kann jemand helfen.

Besten Dank im Voraus.

Myhar · 11.01.2016

Hilft dir Insbesondere die ersten paar Einträge?

dn3d_fanboy · 19.01.2016

Vielen Dank Myhar,
das hier (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) ist genau das was ich gesucht habe.

Nur habe ich mit der Umsetzung des Ganzen ein ppar Probleme. Ich habe es soweit wie im Tutorial oben beschrieben eingebaut, nur scheint der Button nicht zu fuktionieren.

Vielleicht bin ich einfach zu blind den Fehler zu finden, vielleicht hab ich aber auch von vornherein alles falsch gemacht.
Hier habe ich mal meinen Versuch hochgeladen:

Der Effekt soll erst greifen, wenn die Monitorbreite kleiner als 1024px ist. Was das CSS angeht klappt das auch problemlos. Nur der Button kann dann nicht angeklickt werden, bzw. wird die Sidebar nicht eingeblendet.

Ich hoffe ihr könnt mir da nochmal helfen. Ich habe jetzt alle mögliche ausprobiert, mit das Tutorial und auch die Demoseite nochmal angeguckt, aber ich finde nicht den Fehler. Der Pfad zur JS-Datei sollte ebenfalls korrekt sein.

Ich danke euch schonmal im Voraus für eure Hilfe.

Myhar · 19.01.2016

Mach die Konsole auf, du hast einen Fehler in der index.html. document.getElementById( 'showLeft' ) kann nicht aufgelöst werden, das wirft einen Fehler und deshalb funktioniert der Rest wohl auch nicht. Behebe erst einmal alle deine JS-Fehler. Es ist gut möglich, dass die Behebung des einen Fehlers noch mehr Fehler aufwirft, aber erst wenn es keine Fehler mehr gibt, kann man sich dein Problem sinnvoll ansehen.

dn3d_fanboy · 19.01.2016

Myhar schrieb:
Mach die Konsole auf, du hast einen Fehler in der index.html. document.getElementById( 'showLeft' ) kann nicht aufgelöst werden, das wirft einen Fehler und deshalb funktioniert der Rest wohl auch nicht. Behebe erst einmal alle deine JS-Fehler. Es ist gut möglich, dass die Behebung des einen Fehlers noch mehr Fehler aufwirft, aber erst wenn es keine Fehler mehr gibt, kann man sich dein Problem sinnvoll ansehen.

Nochmals besten Dank Myhar,

der Fehler war, dass ich sämtliche JS-Anweisungen, auch die die nicht mehr gebraucht werden, noch im Dokument hatte.

Es funktioniert jetzt so, wie es soll.

dn3d_fanboy · 19.01.2016

Hmm, ich muss dann doch nochmal nerven.

Dank der Hilfe von Myhar habe ich es soweit ja zum Laufen bekommen.
In einer statischen Variante funtioniert das auch problemlos (ab einer Monitorbreite kleiner als 1024px wird alles korrekt umgeschaltet / die Sidebar schiebt sich nach Klick auf den Button raus):

Jetzt habe ich versucht, das Ganze in ein selbstenwickeltes WordPress-Plugin einzufügen. Hier funktioniert es soweit auch alles (Bildschirm ist kleiner als 1024px / Button erscheint / mit Klick auf Button wird Bereich ausgefahren), nur ist der ausgefahrenen Bereich komplett leer. Also die Sidebar, die bei großen Monitoren angezeigt wird erscheint nicht. Laut Firebug ist die Sidebar zwar im Quelltext, wenn ich mit der Maus darüber fahre, wird mir der Bereich aber nirgends angezeigt.

Hier der Link:

Die classie.js, die in der statischen Variante genutzt wird, habe ich mit anderen Scripts in meiner js/control.js zusammengeführt und diese über die functions.php eingebunden.
Der Code für das Ausfahren der Sidebar wird daraus auch ausgeführt (lösche ich ihn, kann ich den Button nicht mehr anklicken).
Die control.js wird auch korrekt im <head> eingefügt, den sonstigen JS-Code habe ich in die footer.php gepackt.

Ich bin mit meinem Latein am Ende und weiß echt nicht wo der Fehler ist, zumal mir Firebug auch keinen Fehler anzeigt.

Ich hoffe ihr könnt mir hier nochmal auf die Sprünge helfen.

Besten Dank im Voraus.

[EDIT]
Ich habe den Fehler gefunden. Ich hatte vergessen, der Sidebar die passende ID zu geben.