2 Toggle navigation | ИТ Шеф

Автор: Александр Мальцев

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

Если статья понравилась, то поделитесь ей в социальных сетях:

Дата публикации

12-01-2017

Избранное

Просмотры

218

Нравится

Комментарии (2)

Александр Мальцев 13 января 2017, 13:43 # 0

Если идёт речь про меню 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 января 2017, 09:02 # 0

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

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