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

时间：2017-10-24 12:34:08

标签： html css html5 twitter-bootstrap css3

当用户点击整个屏幕占用汉堡菜单时，我试图获得一个叠加菜单，如下所示：

enter image description here

我出于某种原因似乎无法让它工作，我试图使用示例，但可能是因为我不是那种经验丰富的引导程序，但它根本不会覆盖菜单。

所以我已经设置了所以汉堡菜单使用媒体查询显示在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有关，

再次感谢所有帮助

2 个答案:

答案 0 :(得分：5)

为此你需要使用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>

答案 1 :(得分：0)

我建议创建一个模态并在菜单项的.on（'click'function（）{}）上启动它。这样的背景应该足以隐藏所有背后的东西，重点放在模态上。如果您不熟悉bootstrap，那么更容易使用bootstrap.dialogue库。这是一些例子的链接。如果您有任何其他问题，请告诉我。

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

相关问题
最新问题