html - 创建一个 Bootstrap 导航栏折叠覆盖菜单

Question

当用户点击占据整个屏幕的汉堡菜单时，我试图获得一个覆盖菜单，像这样:

出于某种原因，我似乎根本无法让它工作，我已经尝试使用示例，但这可能是因为我对 Bootstrap 没有那么多经验，但它根本不会覆盖菜单。

所以我已经设置好，汉堡菜单使用媒体查询显示在 991px 处，它工作正常，但弹出叠加层根本没有发生。

HTML:

  <nav class="navbar navbar-default navbar-fixed-top" id="section1">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
                        <span class="icon-bar"></span> <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
        <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#section1">Home</a>
          </li>
          <li>
            <a href="#section2">About Me</a>
          </li>
          <li>
            <a href="#section3">Game</a>
          </li>
          <li>
            <a href="#section4">Me</a>
          </li>
          <li>
            <a href="#section5">Hobbies</a>
          </li>
          <li>
            <a href="#section6">Contact Me</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <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>About Me</li>
          <li>Game</li>
          <li>Hobbies</li>
           <li>Contact Me</li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS:

@media only screen and (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  .navbar-left, .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .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;
}
}

您可以在此处查看完整代码:Fiddle Link

不知道为什么它不起作用，但我猜这与我没有正确使用 Bootstrap 有关，

再次感谢大家的帮助

Answer 1

为此，您需要使用 javascript(在我的示例中为 jQuery)。

首先，您需要一个叠加层。我用 .overlay 类创建了一个 div，固定的，全高和全宽，红色背景和不透明度

其次，您需要定位菜单。我位于中心(垂直和水平)。 (在 991px 媒体查询以下)

第三，我使用一点点 jQuery 实现了您想要的效果。您可以根据需要更改/设置代码样式。但我为你所做的应该足以帮助你实现你想要的一切

第四，在 Stack Overflow 上，我们不提供免费代码。我们只是帮助您使您的代码发挥作用。在发帖寻求帮助之前，您应该尝试对某个主题进行更多研究

参见 jsFIddle或下面的片段

$(".navbar-toggle").on("click", function() {

  $(".overlay").fadeIn("slow")

})
$(".overlay").on("click", function() {

  $(this).fadeOut();
  $(".navbar-collapse").removeClass("in").addClass("collapse")
})

body {
  background-color: Black;
}

.navbar-default {
  background-color: transparent;
  border-top: 0px solid rgba(0, 0, 0, 0.5);
  border-bottom: 0px solid rgba(0, 0, 0, 0.5);
  border-left: 0px solid rgba(0, 0, 0, 0.5);
  border-right: 0px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
  padding-top: 9px;
  padding-bottom: 26px;
}

.navbar.navbar-default .navbar-collapse {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-nav>li {
  border-right: 1px solid white;
  padding-left: 14px;
  padding-right: 14px;
  height: 32px;
}

.navbar-nav {
  padding-top: 20px;
}

.navbar-nav>li:last-child {
  border: none;
}

.navbar-default .navbar-toggle {
  border-color: rgba(0, 0, 0, 0);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle {
  margin-top: 19px;
  margin-right: 43px;
}

.navbar-default .navbar-nav>li>a {
  color: white;
  font-size: 15px;
  line-height: 1px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #fff;
  background-color: rgba(255, 198, 0, 0);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

.navbar-default .navbar-nav>li>a {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}

.navbar-default .navbar-nav>li>a:after {
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 0px;
  background: transparent;
  transition: width .4s ease, background-color .4s ease;
  margin-top: 12px;
}

.navbar-default .navbar-nav>li>a:hover:after {
  width: 100%;
  background: #FFC600;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  color: #fff;
  background-color: rgba(255, 198, 0, 0);
  border-bottom: solid #FFC600;
  border-bottom-width: 1px;
  height: 29px;
}

@media only screen and (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  
  }
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: red;
    opacity: 0.5;
    left: 0;
    top: 0;
    display: none;
  }
  .navbar-header {
    float: none;
  }
  .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .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;
  }
}

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

<nav class="navbar navbar-default navbar-fixed-top" id="section1">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
        <span class="icon-bar"></span> <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
    </div>
    <div class="overlay">

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#section1">Home</a>
        </li>
        <li>
          <a href="#section2">About Me</a>
        </li>
        <li>
          <a href="#section3">Game</a>
        </li>
        <li>
          <a href="#section4">Me</a>
        </li>
        <li>
          <a href="#section5">Hobbies</a>
        </li>
        <li>
          <a href="#section6">Contact Me</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<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>About Me</li>
          <li>Game</li>
          <li>Hobbies</li>
          <li>Contact Me</li>
        </ul>
      </div>
    </div>
  </div>
</div>