Как вставить 2 меню Bootstrap Navbar на сайт?

Тимофей

21.02.2019

Содержание:

Комментарии

Добрый день. Столкнулся с проблемой, у меня 2 меню на сайте и при открытие сайта на телефоне появляются 2 кнопки для раскрытия каждого меню, но при нажатии на любую, открываются сразу оба меню. Подскажите пожалуйста, как это исправить?

Если идёт речь про меню Bootstrap Navbar, то вам необходимо установить разные идентификаторы для его содержимого. Например, menu-1 и menu-2. А также установить кнопкам, с помощью которых вы открываете содержимое соответствующее меню, нужные цели (data-target). Например, #menu-1 и #menu-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>

Тимофей

14.01.2017, 09:02

Спасибо, все работает

Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.

Комментарии: