Bootstrap Боковая колонна - выдвижная модальная - PullRequest
Новая
       23

Bootstrap Боковая колонна - выдвижная модальная

0 голосов
/ 11 апреля 2020

Я уверен, что на этот вопрос уже задавался ответ, но я просто не могу его найти.

У меня довольно простой Bootstrap вопрос (надеюсь). У меня есть стандартный сайт с верхней навигацией и 2 столбцами ниже (в контейнере, а не в контейнере). Левый столбец предназначен для фильтрации содержимого в правом столбце / главном столбце (например, фильтр строк по городам, фильтр строк по дате и т. Д. c ...).

Однако на мобильном устройстве мне нужно этот левый столбец фильтра, чтобы выдвинуть (аналогично панели навигации). Я также видел, что модели делают это довольно хорошо. Пример

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

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <main role="main" class="container mt-5 ">

    <div class="row">
      <div class="d-none d-lg-block col-lg-3">
        <h4>Side Navigation/Filters</h4>
        <ul>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>

        </ul>
      </div>
      <div class="col-12 col-lg-9">
        <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#sideSlidoutModal">
          Show Side/Filter Nav (mobile only)
        </button>

        <h2>Main Content</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere risus non ante ullamcorper cursus vel et est. Suspendisse eros eros, tristique ut sapien at, vulputate tincidunt orci. Donec pharetra, augue eu lobortis pellentesque, est
          nunc malesuada libero, sed imperdiet massa velit vel arcu. Mauris lobortis nibh nec dolor maximus, a mollis erat ullamcorper. Nam odio nisi, ultricies in euismod ut, dapibus in nisl. Phasellus imperdiet, nulla non eleifend ultricies, libero
          enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
        </p>
        <p>Phasellus imperdiet, nulla non eleifend ultricies, libero enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
        </p>

      </div>
    </div>

  </main>
  <!-- /.container -->

</body>

</html>

Я уверен, что делаю это намного сложнее, чем нужно. Заранее спасибо за любые предложения!

1 Ответ

1 голос
/ 11 апреля 2020

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

$('.open_sidemenu_button').click(function(e){
  $('.mobile_side_nav').toggleClass('menu_open');
  $('body').toggleClass('back_drop');
  e.stopPropagation();
});
$('.mobile_side_nav').click(function(e){
  e.stopPropagation();
});
$('body').click(function(){
  $('.mobile_side_nav').removeClass('menu_open');
  $('body').removeClass('back_drop');
});
@media (max-width: 991px){
  .main_page .container{
    position: relative;
  }
  .main_page .mobile_side_nav{
    position: fixed;
    top: 0;
    bottom: 0;
    left: -300px;
    -ms-flex: 0 0 300px;
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 300px;
    background-color: #fff;
    box-shadow: 0px 0px 5px #000;
    transition: all 0.5s;
    z-index: 999;
    padding: 15px;
  }
  .main_page .mobile_side_nav.menu_open{
    left: 0;
  }
  body.back_drop:before {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 11;
  }
}
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <div class="main_page">
    <div class="container pt-5">
      <div class="row">
        <div class="mobile_side_nav col-lg-3">
          <button type="button" class="open_sidemenu_button d-block d-lg-none btn btn-xs btn-danger ml-auto">X</button>
          <h5>Side Navigation/Filters</h5>
          <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
          </ul>
        </div>
        <div class="col-12 col-lg-9">
          <button type="button" class="open_sidemenu_button d-block d-lg-none btn btn-xs btn-primary">Show Side/Filter Nav (mobile only)</button>
          <h2>Main Content</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere risus non ante ullamcorper cursus vel et est. Suspendisse eros eros, tristique ut sapien at, vulputate tincidunt orci. Donec pharetra, augue eu lobortis pellentesque, est
    nunc malesuada libero, sed imperdiet massa velit vel arcu. Mauris lobortis nibh nec dolor maximus, a mollis erat ullamcorper. Nam odio nisi, ultricies in euismod ut, dapibus in nisl. Phasellus imperdiet, nulla non eleifend ultricies, libero
    enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
          </p>
          <p>Phasellus imperdiet, nulla non eleifend ultricies, libero enim sollicitudin erat, nec mollis odio ipsum tristique massa. Aliquam nec tortor dictum, egestas lectus a, accumsan augue.
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Надеюсь, этот код поможет вам сделать ваше решение, а также поможет в будущем.

Спасибо ...

...