将多个Bootstrap菜单合并为一个移动菜单? [英] Combining multiple Bootstrap menus into one for mobile?

问题描述

我一直在看这个先前问过的问题:

I've been looking at this previously asked question:

在折叠时合并多个Bootstrap 3导航栏菜单

正如您在此小提琴

问题在于，对于我当前的布局而言，该解决方案并不完美.显示方式如下:

The problem is that for my current layout this solution isn't perfect. Here is how it displays:

它适用于我想的其他情况，但在我的情况下，顶部导航栏将显示:在移动设备上没有导航栏，因此页面上只有一个导航栏，并且一旦用户单击切换开关，就不理想了新菜单中间的徽标，然后在页面的中间进行切换.

It works for the other scenario I suppose but in my case the top navbar will be display:none on mobile so there will only be a single navbar on the page and once a user clicks the toggle it isn't ideal to have the logo in the middle of the new menu and the toggle halfway down the page.

是否可以进行最终显示，如:

Is it possible to do have the final display like:

我有权更改HTML的结构或添加任何其他JavaScript，但不能更改第二个导航栏上徽标的设计.

I have full access to change the structure of the HTML or add any additional javascript, but I cannot change the design of the logo on the second navbar.

当前HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Support</a> </li>
      </ul>
      <div class="navbar-right">
        <select><option>My Portfolio</option></select>
      </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <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>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <div class="navbar-right" role="search">
        <ul class="nav navbar-nav">
          <li><a href="#">Stuff</a></li>
          <li><a href="#">Pinterest</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

推荐答案

所以我找到了答案，可以通过

So I found the answer and you can see by this fiddle.

我基本上采用了这个答案(很有趣，是由回答我上面链接的问题的同一个人)，并且只是使用了前置而不是追加.

Basically I took this answer (funny it's by the same person who answered the question I linked above) and just used prepend instead of append.

使用的js:

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
  $('#bs-example-navbar-collapse-1').prepend($('#sidebar').html());
});
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function () {
  $('#bs-example-navbar-collapse-1 .top-nav').remove();
});
$(window).on('resize', function () {
  if (window.innerWidth > 768) {$('#bs-example-navbar-collapse-1').collapse('hide');}
});

他正在从第一个列表的#sidebar中提取HTML，并将其附加(在此处添加)到第二个列表中.然后，当折叠不再是页面上的课程时，他再次将其删除.您可以在小提琴上看到不完美的解决方案.

He's taking the HTML from the first list #sidebar and appending (prepending here) it to the second list. Then he removes it again once the collapse is no longer the class on the page. You can see the imperfect solution on the fiddle.

这篇关于将多个Bootstrap菜单合并为一个移动菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！