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

问题描述

我一直在查看之前提出的这个问题:

I've been looking at this previously asked question:

它适用于我认为的另一种情况，但在我的情况下，顶部导航栏将显示:移动设备上没有，因此页面上只会有一个导航栏，一旦用户单击切换按钮，它就不理想了新菜单中间的标志和页面中间的切换按钮.

And it provides a good solution to this issue as you can see in this fiddle

是否有可能进行最终显示:

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

我拥有更改 HTML 结构或添加任何其他 javascript 的完全访问权限，但我无法更改第二个导航栏上的徽标设计.

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.

当前 HTML:

</div><!--/.navbar-collapse --></div><!--/.container-fluid --></nav><nav class="navbar navbar-default" role="navigation"><div class="container-fluid"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>

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.

<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse"><div class="navbar-right" role="search"><ul class="nav navbar-nav"><li><a href="#">资料</a></li><li><a href="#">Pinterest</a></li><li><a href="#">Facebook</a></li><li><a href="#">推特</a></li><li><a href="#">博客</a></li>

Current HTML:

</div><!--/.navbar-collapse --></div><!--/.container-fluid --></nav>

<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屋！