Я создаю мобильное приложение на основе браузера и решил использовать Bootstrap 3 в качестве фреймворка css для дизайна. Bootstrap 3 имеет отличную «отзывчивую» функцию на панели навигации, где она автоматически сворачивается, если обнаруживает конкретную «точку останова», касающуюся разрешения браузера. Это работает во многих ситуациях.
Но заметили ли вы в последнее время, что во многих мобильных приложениях на основе браузера основная навигация скрыта в левой части экрана, и когда значок переключения нажимается (переключается) в правом верхнем углу, основная навигация выдвигается на справа примерно 2/3 пути в экран? Это становится все более популярным решением для навигации по приложениям на основе браузера на мобильных устройствах, и я думаю, что теоретически должно быть довольно легко изменить bootstrap css / js, чтобы приспособить эту версию функции свертывания навигации.
Как можно реализовать эту функцию? Похоже, это не требует слишком больших изменений. Очень хотелось бы услышать ваши мысли / решения по этому поводу. Кроме того, я думаю, что это было бы отличным долгосрочным решением для реализации Bootstrap в качестве встроенной функции.
К сожалению, я не делал никаких попыток создать эту функцию, потому что, хотя я знаком с этими технологиями, я в основном разработчик PHP / MySQL и считаю, что такая полезная функция должна быть создана экспертами с пониманием, которого у меня нет. как фронтенд-разработчик.
Ответы:
Это было для моего собственного проекта, и я тоже этим поделюсь.
ДЕМО: http://jsbin.com/OjOTIGaP/1/edit
У этого были проблемы после 3.2, поэтому приведенный ниже может работать лучше для вас:
https://jsbin.com/seqola/2/edit --- ЛУЧШАЯ ВЕРСИЯ, немного
CSS
HTML
JQuery
источник
Бутстрап 4
Создать адаптивный «ящик» боковой панели навигации в Bootstrap 4?
Горизонтальное меню Bootstrap свернуть в боковое меню
Бутстрап 3
Я думаю, что то, что вы ищете, обычно называют макетом вне холста. Вот стандартный пример вне холста из официальных документов Bootstrap: http://getbootstrap.com/examples/offcanvas/
«Официальный» пример использует правую боковую панель для включения и выключения отдельно от меню верхней панели навигации. Я также нашел эти варианты за пределами холста, которые появляются слева и могут быть ближе к тому, что вы ищете.
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
источник
@media screen and (max-width: 768px) {
.. в CSS.Без плагина мы можем это сделать; многоуровневое адаптивное меню начальной загрузки для мобильного телефона с переключателем слайдов для мобильных устройств:
Ссылка на скрипт JS
источник