使用css打开子导航时显示整页覆盖

时间：2016-07-11 10:56:22

标签： html css twitter-bootstrap

我希望在使用css打开子菜单时显示叠加层，我已经尝试了下面的事情，它已经做了这个技巧，但我无法回到导航链接，因为叠加层位于顶部。< / p>

＆＃13;
＆＃13; 
.header .navbar .nav .nav-item div.big-menu {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  max-height: 450px;
  top: 80px;
  left: 0;
  z-index: 399;
  visibility: hidden;
  overflow: hidden;
  background: #ffffff;
  color: #181717;
  -webkit-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.header .navbar .nav .nav-item div.big-menu .big-menu-body {
  position: relative;
  overflow: hidden;
  background-color: white
}

.header .navbar .nav .nav-item:hover > div {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

/* Used :after to apply overlay */
.header .navbar .nav .nav-item:hover > div:before {
  content: '';
  position: fixed;
  z-index: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>



<body>
  <div class="header">
      <div class="container">
          <nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Sub Menu</a>
      <div class="big-menu">
                    <div class="big-menu-body bg-img-2">

                      <div class="row big-menu-container">
                        <div class="col-md-8">
                          <div class="skew-text">
                            <div class="big-menu-nav two-col">
                                <div class="row">
                                  <div class="col-md-6">
                                    <h5>Categories</h5>
                                    <ul class="sm-nav-item">
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                    </ul>
                                  </div>

                                  <div class="col-md-6">
                                    <h5>Our work</h5>
                                </div>
                              </div>

                              <blockquote>
                                More than a big idea. Lorem ipsum dolor sit amet, consectetur adipiscing elit
                              </blockquote>

                              <a href="" class="btn read-more read-more-primary">
                                Our Clients
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 menu-info">
                          <div class="info-text top-padding text-center">
                            <h5>FEATURED</h5>
                            <h3>Bla Bla</h3>
                            <a href="" class="btn read-more">View details</a>
                          </div>
                        </div>
                      </div>
                      <!--end big menu grid-->
                    </div>
                  </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  
</nav>
          <!--end nav-->
      </div>
      <!--end container-->
    </div>
    <!--end header-->
</body>
＆＃13;
＆＃13;
＆＃13;

正如您所看到的，它通过导航，我想保持导航处于活动状态以显示其他链接。

请帮忙

1 个答案:

答案 0 :(得分：2)

这就是你想要的吗？ 刚刚将top:0px更改为top:55px

的.header .navbar .nav .nav-item:hover > div:before 

$(document).ready(function(){  
 
     $(".nav-link.sub").mouseover(function(){
        $(".header").css("background", "rgba(0,0,0,0.6)");
    });
  
  
    $(".nav-link.sub").mouseout(function(){
        $(".header").css("background", "#fff");
    });
  

});
.header{
  transition:0.6s;
}
.header .navbar .nav .nav-item div.big-menu {
  position: absolute;
  display: block;
  opacity: 0;
  width: 100%;
  max-height: 450px;
  top: 80px;
  left: 0;
  z-index: 399;
  visibility: hidden;
  overflow: hidden;
  background: #ffffff;
  color: #181717;
  -webkit-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.header .navbar .nav .nav-item div.big-menu .big-menu-body {
  position: relative;
  overflow: hidden;
  background-color: white
}

.header .navbar .nav .nav-item:hover > div {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

/* Used :after to apply overlay */
.header .navbar .nav .nav-item:hover > div:before {
  content: '';
  position: fixed;
  z-index: auto;
  width: 100%;
  height: 100%;
  top: 54px;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-XXXXXXXX" crossorigin="anonymous"></script>



<body>
  <div class="header">
      <div class="container">
          <nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link sub" href="#">Sub Menu</a>
      <div class="big-menu">
                    <div class="big-menu-body bg-img-2">

                      <div class="row big-menu-container">
                        <div class="col-md-8">
                          <div class="skew-text">
                            <div class="big-menu-nav two-col">
                                <div class="row">
                                  <div class="col-md-6">
                                    <h5>Categories</h5>
                                    <ul class="sm-nav-item">
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                      <li><a href="">Category Item</a></li>
                                    </ul>
                                  </div>

                                  <div class="col-md-6">
                                    <h5>Our work</h5>
                                </div>
                              </div>

                              <blockquote>
                                More than a big idea. Lorem ipsum dolor sit amet, consectetur adipiscing elit
                              </blockquote>

                              <a href="" class="btn read-more read-more-primary">
                                Our Clients
                              </a>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 menu-info">
                          <div class="info-text top-padding text-center">
                            <h5>FEATURED</h5>
                            <h3>Bla Bla</h3>
                            <a href="" class="btn read-more">View details</a>
                          </div>
                        </div>
                      </div>
                      <!--end big menu grid-->
                    </div>
                  </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  
</nav>
          <!--end nav-->
      </div>
      <!--end container-->
    </div>
    <!--end header-->
</body>

相关问题
最新问题