创建 Bootstrap 导航栏折叠覆盖菜单

Question

当用户单击它占据整个屏幕的汉堡菜单时，我试图获得一个覆盖菜单，如下所示：

由于某种原因，我似乎根本无法使用它，我尝试使用示例，但这可能是因为我对引导程序没有经验，但它根本不会覆盖菜单。

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

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

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

再次感谢所有的帮助

Answer 1

为此，您需要使用 javascript（或在我的示例中使用 jQuery）。

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

其次，你需要定位你的 menu 。 我定位在中心（垂直和水平）。 （在低于 991px 的媒体查询中）

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

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

请参阅下面的jsFIdle或代码段

 $(".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>

Answer 2

我建议创建一个模态并在菜单项的 .on('click' function(){}) 上启动它。 这样，背景应该足以隐藏所有内容，并且重点将放在模态上。 如果您不熟悉引导程序，更简单的解决方案是使用 bootstrap.dialogue 库。 这是一些示例的链接。 如果您有任何其他问题，请告诉我。

https://nakupanda.github.io/bootstrap3-dialog/