Кнопка Navbar сворачивается в боковую панель - PullRequest
Новая
       7

Кнопка Navbar сворачивается в боковую панель

0 голосов
/ 02 марта 2020

Есть ли способ реализовать боковую панель на кнопке свертывания на панели навигации?

Когда я уменьшаю экран, я получаю кнопку свертывания на панели навигации со всеми кнопками на ней.

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

DEMO 

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

1 Ответ

1 голос
/ 02 марта 2020

Добавьте ниже css в вашем файле 

@media only screen and (max-width: 767px) {
#collapsibleNavbar {position: fixed;top: 0;left: -100%;bottom: 0;display: block;max-width: 320px;width: calc(100% - 80px);min-height: 100%;z-index: 999;transition: all 0.3s ease;background: #000000;}
#collapsibleNavbar.show {left: 0;}
}
...