Ich baue eine browserbasierte mobile App und habe mich entschieden, Bootstrap 3 als CSS-Framework für das Design zu verwenden. Bootstrap 3 verfügt über eine großartige "responsive" Funktion in der Navigationsleiste, die automatisch zusammenfällt, wenn ein bestimmter "Breakpoint" in Bezug auf die Auflösung des Browsers erkannt wird. Es funktioniert in vielen Situationen.
Aber haben Sie in letzter Zeit bemerkt, dass bei vielen browserbasierten mobilen Apps die primäre Navigation links vom Bildschirm ausgeblendet ist und wenn das Umschaltsymbol in der oberen rechten Ecke gedrückt (umgeschaltet) wird, wird die primäre Navigation nach oben verschoben rechts etwa 2/3 des Weges in den Bildschirm? Dies ist eine zunehmend beliebte Lösung für die Navigation durch browserbasierte Apps auf Mobilgeräten. Theoretisch sollte es ziemlich einfach sein, Bootstrap-CSS / JS zu ändern, um diese Version der Navigationskollapsfunktion zu unterstützen.
Wie können diese Funktionen implementiert werden? Es scheint, dass es nicht zu viele Modifikationen erfordern sollte. Ich würde wirklich gerne Ihre Gedanken / Lösungen zu diesem Thema hören. Ich denke auch, dass es eine großartige langfristige Lösung für Bootstrap wäre, sie als integrierte Funktion zu implementieren.
Leider habe ich keine Versuche unternommen, diese Funktion zu erstellen, da ich zwar mit diesen Technologien vertraut bin, aber überwiegend PHP / MySQL-Entwickler bin und meiner Meinung nach eine so nützliche Funktion von Experten mit Einsichten erstellen sollte, die ich nicht habe als Front-End-Entwickler.
Antworten:
Dies war für mein eigenes Projekt und ich teile es auch hier.
DEMO: http://jsbin.com/OjOTIGaP/1/edit
Dieser hatte nach 3.2 Probleme, daher funktioniert der folgende möglicherweise besser für Sie:
https://jsbin.com/seqola/2/edit --- BESSERE VERSION, leicht
CSS
HTML
jQuery
quelle
Bootstrap 4
Erstellen Sie eine reaktionsfähige Navigationsleiste "Schublade" in Bootstrap 4?
Das horizontale Bootstrap-Menü wird zum Seitenmenü zusammengefasst
Bootstrap 3
Ich denke, was Sie suchen, ist allgemein als "Off-Canvas" -Layout bekannt. Hier ist das Standard-Off-Canvas-Beispiel aus den offiziellen Bootstrap-Dokumenten: http://getbootstrap.com/examples/offcanvas/
Im "offiziellen" Beispiel wird eine rechte Seitenleiste verwendet, mit der Sie getrennt vom oberen Navigationsleistenmenü ein- und ausschalten können. Ich habe auch diese Off-Canvas-Variationen gefunden, die von links hineingleiten und möglicherweise näher an dem liegen, wonach Sie suchen.
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
quelle
@media screen and (max-width: 768px) {
im CSS anpassen .Ohne Plugin können wir dies tun; Bootstrap Multi-Level-Responsive-Menü für Mobiltelefone mit Schieberegler für Mobiltelefone:
Referenz JS Geige
quelle