Как создать складную боковую панель в том же div?

Question

Предположим, у меня есть div, который является контейнером боковой панели (доступно слева) и основного содержимого (доступно справа).

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

Я сейчас использую Bootstrap 4, и у всего решения, предложенного на Internet, есть много работы, чтобы сделать это, я ищу простой способчтобы достичь этого.

На самом деле это мой код:

<div class="container-fluid">
<div class="row">
    <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
        <div class="py-2 sticky-top">
            <div class="nav flex-column">
                <a href="" class="nav-link">Sidebar</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
                <a href="" class="nav-link">Link</a>
            </div>
        </div>
    </div>
    <div class="col" id="main">
        <h1>Main Area</h1>
        <p>Main content.</p>
    </div>
 </div>
</div>

Как вы можете видеть из этого codeply Я уже организовал структуру div в два блока:

Как сделать так, чтобы боковая панель была доступна в раздвижном элементе div?

Заранее благодарен за любую помощь.

Answer 1

Вы можете заключить его в div с идентификатором и классами navbar-collapse и collapse.Затем можно добавить переключатель:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
  <div class="nav flex-column">
    <a href="" class="nav-link">Sidebar</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
    <a href="" class="nav-link">Link</a>
  </div>
</div>

Пример Bootply

Дополнительная информация о панели навигации и классах

Обновление по комментариям

Чтобы переключить боковую панель со стороны, вам может понадобиться добавить немного javascript и анимировать максимальную ширину:

$('.navbar-toggler').on('click', function(e) {
  e.preventDefault();
  var target = $(this).data('target');
  $(target).toggleClass('hide') ;
});

@import url("//maxcdn.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
/* CSS used here will be applied after bootstrap.css */
#sticky-sidebar {
  min-height: 100vh;
  transition: max-width 1s;
  overflow:hidden;
}
#sticky-sidebar.hide {
  max-width:0;
  padding:0 !important;
}
.navbar-toggler {
  background-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-3 px-1 bg-dark" id="sticky-sidebar">
      <div class="py-2 sticky-top">
          <div class="nav flex-column">
            <a href="" class="nav-link">Sidebar</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
            <a href="" class="nav-link">Link</a>
          </div>
        </div>
    </div>
    <div class="col" id="main">
      
        <button class="navbar-toggler" type="button" data-target="#sticky-sidebar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <h1>Main Area</h1>
      <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
        chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

      <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
        disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
        food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>

      <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
        chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

      <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
        raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
        chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
    </div>
  </div>
</div>