创建Bootstrap导航栏折叠叠加菜单 [英] Creating a Bootstrap navbar collapse overlay menu

查看：34
本文介绍了创建Bootstrap导航栏折叠叠加菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当用户单击汉堡菜单时，我试图获取一个覆盖菜单，该菜单占据了整个屏幕，就像这样:

I am trying to get an overlay menu when the user clicks on the burger menu it takes up the whole screen, Something like this :

由于某种原因，我似乎无法使其完全正常工作，我尝试使用示例，但这可能是因为我对Bootstrap没有足够的经验，但是它根本不会覆盖菜单.

I for some reason cant seem to get it to work at all , i have tried to use examples but it might be because i am not that experienced with bootstrap but it wont overlay the menu at all.

所以我已经设置好了，以便使用媒体查询将汉堡菜单显示为991px，并且工作正常，但根本不会弹出叠加图.

So i have set it up so the burger menu appears at 991px using media queries and it works fine but getting the overlay to pop up is not happening at all.

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

您可以在此处看到完整的代码:小提琴链接

You can see the full code here : Fiddle Link

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

No idea why its not working but i am guessing its something to do with me not using bootstrap correctly ,

再次感谢您的所有帮助

推荐答案

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

For that you need to use javascript ( or jQuery in my example ) .

首先，您需要一个覆盖层.我创建了一个类为 .overlay 的div，其固定高度和宽度均具有红色背景和不透明性

First, you need an overlay. I created a div with class .overlay , fixed, full height and width with red background and opacity

第二，您需要放置菜单.我位于中心(垂直和水平).(在991px以下的媒体查询中)

Second, you need to position your menu . I positioned in center ( vertically and horizontally ). ( in below 991px media query )

第三，用一点点jQuery，我达到了想要的效果.您可以根据需要更改/设置代码样式.但是我为您提供的服务应该足以帮助您准确实现所需的目标

Third, with a little bit of jQuery i made the effect you wanted. You can change/style the code as you please. But what i made for you should be more than enough to help you achieve exactly what you want

第四，在此处的堆栈溢出中，我们不提供免费代码.我们只是帮助您使代码正常运行.在发布此处寻求帮助之前，您应该尝试对某个主题进行更多研究

Fourth, here on Stack Overflow we don't make free code. We just help you make your code functional. You should try and research more on a subject before posting here for help

请参见 jsFIddle 或下面的代码段

See jsFIddle or snippet below

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

这篇关于创建Bootstrap导航栏折叠叠加菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆