@ayapergenov

Как реализовать 2 адаптивных меню на Bootsrеap 4?

Есть горизонтальное меню из 2 пунктов в шапке и вертикальное меню в левом сайдбаре.
Нужно, чтобы в мобильных версиях меню сайдбара либо соединялось с меню в шапке либо сворачивалось в гамбургер.
Подскажите как грамотно сделать?
  • Вопрос задан
  • 28 просмотров
Пригласить эксперта
Ответы на вопрос 2
как-то так ?
<!-- 1 меню -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="menu-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 2 меню -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-2" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="menu-2">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

Но вам лучше пересмотреть интерфейс, два бутерборода быть не должно, мало того 99% процентов сайтов обходятся без них. Так что пересмотрите интерфейс.
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
2 пункта в шапке - маловато для сворачивания в отдельное меню. Их можно и не засовывать в отдельный гамбургер, а заменить, например, пиктограммами или прочим, или вставить в общее мобильное меню, которое объединит всё нужное
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы