Сворачивание боковой панели с помощью Bootstrap

102

Я только что посетил эту страницу http://www.elmastudio.de/ и задался вопросом, можно ли с помощью Bootstrap 3 создать коллапс левой боковой панели.

Код для свертывания боковой панели сверху (только на телефоне):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

Сама боковая панель имеет класс hidden-xs. Удаляется с помощью следующих js

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Если вы нажмете кнопку, боковая панель будет переключена сверху. Приятно видеть, как боковая панель ведет себя так, как показано на веб-сайте выше. Любая помощь приветствуется!

Крис Мы
источник
7
Все ли мы согласны с тем, что elmastudio.de больше не имеет этого сворачивания боковой панели?
Peter V. Mørch
Также проверка этих полезных коллекций меню начальной загрузки врезки designerslib.com/bootstrap-sidebar-menu-templates
Karuppiah РК

Ответы:

124

Бутстрап 3

Да, это возможно. Этот пример «вне холста» должен помочь вам начать работу.

https://codeply.com/p/esYgHWB2zJ

В основном вам нужно обернуть макет во внешний div и использовать медиа-запросы для переключения макета на меньших экранах.

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

Кроме того, здесь есть еще несколько примеров боковой панели Bootstrap


Бутстрап 4

Создать адаптивный «ящик» боковой панели навигации в Bootstrap 4?

Зим
источник
@Delucia: работает в Chrome на Android. Сама программа Bootply работает некорректно, но нажмите ссылку «Переключиться на просмотр».
Дэн Даскалеску
2
вот официальный шаблон панели управления
панелью
1
@stom: Он скрывается в версиях для мобильных устройств и планшетов, что является проблемой.
25

http://getbootstrap.com/examples/offcanvas/

Это официальный пример, для кого-то может быть лучше. Он находится в разделе примеров экспериментов, но, поскольку он является официальным, его следует обновлять до текущей версии начальной загрузки.

Похоже, они добавили файл css вне холста, используемый в их примере:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

И немного кода JS:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
Джон
источник
9

РЕДАКТИРОВАТЬ: я добавил еще один вариант для боковых панелей начальной загрузки.

На самом деле существует три способа сделать боковую панель bootstrap 3. Я старался сделать код максимально простым.

Фиксированная боковая панель

Здесь вы можете увидеть демонстрацию простой фиксированной боковой панели, которую я разработал, такой же высоты, как и страница.

Боковая панель в столбце

Я также разработал довольно простую боковую панель столбцов, которая работает на странице из двух или трех столбцов внутри контейнера. Требуется длина самого длинного столбца. Здесь вы можете увидеть демо

Панель приборов

Если вы используете панель управления загрузкой Google, вы можете найти несколько подходящих панелей, таких как эта . Однако для большинства из них требуется много кода. Я разработал приборную панель, которая работает без дополнительного javascript (рядом с javascript начальной загрузки). Вот демо

Для всех трех примеров вы, конечно, должны включить файлы jquery, bootstrap css, js и theme.css.

Ползунок

Если вы хотите, чтобы боковая панель скрывалась при нажатии кнопки, это также возможно с помощью небольшого JavaScript. Вот демонстрация

FabianW
источник
6

Через Angular: используя ng-classAngular, мы можем скрыть и показать боковую панель.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}
Разан Пол
источник
3

Это не упоминается в документе, но левая боковая панель в Bootstrap 3 возможна с использованием метода "Collapse".

Как упоминалось в bootstrap.js:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Это означает, что добавление класса "width" в цель будет расширяться по ширине, а не по высоте:

http://jsfiddle.net/2316sfbz/2/

erw13n
источник
Как бы вы сделали это, чтобы скрыть левое меню только на 80% и показать маленькую кнопку, чтобы снова развернуть меню?
Pathros