I have a responsive site that works with Bootstrap. In the mobile version, both of my menus are minimized to their hamburger. Both hamburgers open their menu independently.

How can I make the first menu fold back when opening the second menu?

The original is here: http: //reklama-86.rf See the mobile version.
Actually code:

<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>
  • Who minus the question, please explain for what? - Gleb Kemarsky

2 answers 2

1) minimal, self-sufficient and reproducible example

He took the example from the Bootstrap website and put together a panel with two menus to see how they behave by default:

 .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 plugin

Navigation panels are collapsed and deployed using a javascript plugin, so it's best to use its events and methods .

The .collapse('hide') method .collapse('show') minimize the menu, the .collapse('show') method will .collapse('toggle') , and the .collapse('toggle') method .collapse('toggle') switch to the opposite state.

Folding and expanding the menu takes some time, so for each of them there are two events. The show.bs.collapse event occurs as soon as the show method was called and the menu began to unfold, and the event shown.bs.collapse when the menu was fully unfolded. Similarly, the hide.bs.collapse and hiden.bs.collapse will occur at the beginning and end of folding.

Now we add a small script so that each menu, opening, gives the second menu a command to close:

 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) direction of disclosure when changing menus

In the second example, it seems that the left menu pushes the right down, and the right menu pushes the left up. In fact, the plugin works the same for both menus, but in the DOM tree the left menu is earlier than the right one. Because of this, when the two menus replace each other, it seems as if the left menu is turning down and the right menu is turning up.

In order for both menus to push each other down, you need to swap them. To do this, we use the .insetAfter() method .

Total: 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>

  • Yes, you are right, so much better - FRC_Volen

The solution was found, but rather rude:

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

But it works)

  • Bootstrap expands and collapses something using the collapse plugin . This plugin: 1) uses the intermediate class collapsing , so that the menu leaves smoothly and gradually, and does not arise from nowhere and does not disappear into nowhere; 2) changes the classes and the aria-expanded attribute of the hamburger itself. - Gleb Kemarsky