0

У меня адаптивный сайт, работающий с Bootstrap. В мобильной версии оба моих меню сворачивается в свой гамбургер. Оба гамбургера открывают свое меню независимо от другого.

Как мне сделать, чтобы при открытии второго меню первое меню сворачивалось обратно?

Оригинал тут: http://реклама-86.рф Смотрите мобильную версию.
Собственно код:

<div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topnav3" aria-expanded="false" id="small_menu1">
        <div class="container">
            <div class="row">
                <div>
                    <span class="sr-only">Меню</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <div><p>Меню</p></div>
            </div>
        </div>
    </button>
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topnav4" aria-expanded="false" id="small_menu2">
        <div class="container">
            <div class="row">
                <div><span class="sr-only">Услуги</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>
                <div><p>Услуги</p></div>
            </div>
        </div>
    </button>
</div>
<div class="collapse navbar-collapse" id="topnav3">
    <?php wp_nav_menu($args);?> // выводим верхнее меню
</div>
<div class="collapse navbar-collapse" id="topnav3">
    <?php wp_nav_menu($args);?> // выводим второе верхнее меню
</div>
1
  • Кто минусовал вопрос, объясните, пожалуйста, за что? 12 фев 2017 в 20:55

2 ответа 2

0

1) минимальный, самодостаточный и воспроизводимый пример

Взял пример с сайта Бутстрапа и собрал панель с двумя меню, чтобы увидеть, как они ведут себя по умолчанию:

.navbar-toggle.pull-left {
  margin-left: 10px;
}
.navbar-right {
  text-align: right;
}
@media (min-width: 768px) {
  .navbar-left  { float: left;  }
  .navbar-right { float: right; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed pull-left" type="button" data-toggle="collapse" data-target="#navbar-left" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-right" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar-left" class="collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav">
        <li><a href="">Left 1</a></li>
        <li><a href="">Left 2</a></li>
        <li><a href="">Left 3</a></li>
      </ul>
    </div>
    <div id="navbar-right" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="">Right 1</a></li>
        <li><a href="">Right 2</a></li>
        <li><a href="">Right 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2) плагин Collapse.js

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

Метод .collapse('hide') свернёт меню, метод .collapse('show') – развернёт, а метод .collapse('toggle') – переключит в противоположное состояние.

Сворачивание и разворачивание меню занимают некоторое время, поэтому для каждого из них предусмотрено по два события. Событие show.bs.collapse возникает, как только вызвали метод show и меню начало разворачиваться, а событие shown.bs.collapse – когда меню полностью развернулось. Аналогично события hide.bs.collapse и hiden.bs.collapse произойдут в начале и конце сворачивания.

Теперь добавим небольшой скрипт, чтобы каждое меню, открываясь, давало второму меню команду на закрытие:

var $navbarLeft  = $('#navbar-left');
var $navbarRight = $('#navbar-right');

$navbarLeft.on('show.bs.collapse', function () {
  $navbarRight.collapse('hide');
})
$navbarRight.on('show.bs.collapse', function () {
  $navbarLeft.collapse('hide');
})
.navbar-toggle.pull-left {
  margin-left: 10px;
}
.navbar-right {
  text-align: right;
}
@media (min-width: 768px) {
  .navbar-left  { float: left;  }
  .navbar-right { float: right; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed pull-left" type="button" data-toggle="collapse" data-target="#navbar-left" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-right" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar-left" class="collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav">
        <li><a href="">Left 1</a></li>
        <li><a href="">Left 2</a></li>
        <li><a href="">Left 3</a></li>
      </ul>
    </div>
    <div id="navbar-right" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="">Right 1</a></li>
        <li><a href="">Right 2</a></li>
        <li><a href="">Right 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3) направление раскрытия при смене меню

Во втором примере кажется, что левое меню выталкивает правое вниз, а правое меню подталкивает левое наверх. На самом деле плагин работает для обоих меню одинаково, но в дереве DOM левое меню стоит раньше правого. Из-за этого, когда два меню сменяют друг друга, кажется, будто левое меню разворачивается вниз, а правое – вверх.

Чтобы оба меню выталкивали друг друга вниз, нужно менять их местами. Для этого воспользуемся методом .insetAfter().

Итого: http://codepen.io/glebkema/pen/rjowKz

var $navbarLeft  = $('#navbar-left');
var $navbarRight = $('#navbar-right');

$navbarLeft.on('show.bs.collapse', function () {
  if ($navbarRight.hasClass('in')) {
    $navbarRight.insertAfter($(this)).collapse('hide');
  }
})
$navbarRight.on('show.bs.collapse', function () {
  if ($navbarLeft.hasClass('in')) {
    $navbarLeft.insertAfter($(this)).collapse('hide');
  }
})
.navbar-toggle.pull-left {
  margin-left: 10px;
}
.navbar-right {
  text-align: right;
}
@media (min-width: 768px) {
  .navbar-left  { float: left;  }
  .navbar-right { float: right; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed pull-left" type="button" data-toggle="collapse" data-target="#navbar-left" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-right" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar-left" class="collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav">
        <li><a href="">Left 1</a></li>
        <li><a href="">Left 2</a></li>
        <li><a href="">Left 3</a></li>
      </ul>
    </div>
    <div id="navbar-right" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="">Right 1</a></li>
        <li><a href="">Right 2</a></li>
        <li><a href="">Right 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1
  • Да, Вы правы, так на много лучше
    – FRC_Volen
    14 фев 2017 в 5:55
0

Решение было найдено, но довольно грубое:

$('#small_menu1').on('click', function(){
    $('#topnav4').removeClass('in');
});

$('#small_menu2').on('click', function(){
    $('#topnav3').removeClass('in');
});

Зато работает)

1
  • Бутстрап разворачивает и сворачивает что-либо с помощью плагина collapse. Этот плагин: 1) использует промежуточный класс collapsing, чтобы меню выезжало плавно и постепенно, а не возникало из ниоткуда и не пропадало в никуда; 2) меняет классы и атрибут aria-expanded у самого гамбургера. 12 фев 2017 в 21:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.