Bootstrap导航栏折叠覆盖菜单

Question

我想复制这个导航栏折叠内容（请参见下面的图片） 如您所见，一旦我点击汉堡菜单，导航栏的内容将显示在全屏幕中，而不是滑动。 有没有插件或CSS片段可以实现这一点？感谢您的帮助。

- Imat

---

很难没有代码，因此您可能希望在此处查看：https://dev59.com/THA75IYBdhLWcg3wB0VP?page=1&tab=votes#tab-top - John Reid

Answer 1

您可以使用模态框（modal）代替 data-toggle 属性的 collapse 值来定位折叠导航栏。您可以自由地对模态框内容进行样式设置。

这里是一个例子，我相信您会明白的。

.navbar-toggle {
  float: left !important;
  margin-left: 15px;
  margin-right: 0;
}

.modal-nav-content {
  width: 100%;
  height: auto;
}

.modal-nav-body {
  margin-top: 100px; 
}

.modal-nav-body ul {
  list-style-type: none;
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
}

.modal-nav-body ul li {
  text-align: center;
  font-size: 130%;
  padding: 8px;
  text-transform: uppercase;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="modal" data-target="#nav-modal" 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>
    </div>    

  </div>
</nav>

<!-- Modal -->
<div class="modal fade" id="nav-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-nav-content">
      <div class="modal-nav-body">
        <ul>
          <li>Brand</li>
          <li>Home</li>
          <li>Tour</li>
          <li>News</li>
        </ul>
      </div>
    </div>
  </div>
</div>

- DavidDomain