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

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

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

  1. Александр Мальцев
    Александр Мальцев
    13.01.2017, 13:43
    Если идёт речь про меню 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>
    
    1. Тимофей
      Тимофей
      14.01.2017, 09:02
      Спасибо, все работает
    Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.