Buduję aplikację mobilną opartą na przeglądarce i zdecydowałem się użyć Bootstrap 3 jako frameworka css do projektowania. Bootstrap 3 ma świetną "responsywną" funkcję na pasku nawigacyjnym, która zwija się automatycznie, jeśli wykryje określony "punkt przerwania" dotyczący rozdzielczości przeglądarki. Działa w wielu sytuacjach.
Ale czy zauważyłeś ostatnio, jak wiele aplikacji mobilnych opartych na przeglądarkach ma podstawową nawigację ukrytą z lewej strony ekranu, a po naciśnięciu (przełączeniu) ikony przełącznika w prawym górnym rogu główna nawigacja przesuwa się do w prawo około 2/3 wysokości ekranu? Jest to coraz bardziej popularne rozwiązanie do nawigacji po aplikacjach opartych na przeglądarkach na urządzeniach mobilnych i myślę, że teoretycznie powinno być dość łatwo zmodyfikować bootstrap css / js, aby dostosować tę wersję funkcji zwijania nawigacji.
Jak można wdrożyć tę funkcję? Wygląda na to, że nie powinno to wymagać zbyt wielu modyfikacji. Bardzo chciałbym poznać Twoje przemyślenia / rozwiązania w tej sprawie. Myślę też, że byłoby to świetne długoterminowe rozwiązanie dla Bootstrap do zaimplementowania jako wbudowanej funkcji.
Niestety nie podejmowałem żadnych prób stworzenia tej funkcji, ponieważ chociaż jestem zaznajomiony z tymi technologiami, jestem głównie programistą PHP / MySQL i uważam, że funkcja tak użyteczna, jak ta, powinna zostać utworzona przez ekspertów z wiedzą, której nie mam jako programista front-end.
Odpowiedzi:
To było dla mojego własnego projektu i też udostępniam to tutaj.
DEMO: http://jsbin.com/OjOTIGaP/1/edit
Ten miał problemy po 3.2, więc ten poniżej może działać lepiej dla Ciebie:
https://jsbin.com/seqola/2/edit --- LEPSZA WERSJA, nieznacznie
CSS
HTML
jQuery
źródło
Bootstrap 4
Utworzyć responsywną „szufladę” paska bocznego paska nawigacyjnego w Bootstrap 4?
Menu poziome Bootstrap zwiń do menu bocznego
Bootstrap 3
Myślę, że to, czego szukasz, jest ogólnie znane jako układ „poza płótnem”. Oto standardowy przykład poza płótnem z oficjalnej dokumentacji Bootstrap: http://getbootstrap.com/examples/offcanvas/
W „oficjalnym” przykładzie zastosowano pasek boczny po prawej stronie, który umożliwia przełączanie i włączanie niezależnie od górnego menu paska nawigacyjnego. Znalazłem również te wariacje spoza płótna, które przesuwają się z lewej strony i mogą być bliżej tego, czego szukasz.
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
źródło
@media screen and (max-width: 768px) {
.. w CSS.Bez wtyczki możemy to zrobić; wielopoziomowe, responsywne menu bootstrap dla telefonu komórkowego z przełącznikiem suwakowym dla telefonu komórkowego:
Odniesienia do skrzypiec JS
źródło