Question

我只是在学习前端。当到达超小页面时，我有一个问题要制作一个覆盖式导航栏而不是下拉菜单。所以这就是我所做的：

function openNav() {
   document.getElementById("navbarSupportedContent").style.height = "100%";
}
  function closeNav() {
    document.getElementById("navbarSupportedContent").style.height = "0%";
}

#navbarSupportedContent {

	  height: 0;
	  width: 100%;
	  position: fixed;
	  z-index: 1;
	  top: 0;
	  left: 0;
	  background-color: rgb(0,0,0);
	  background-color: rgba(0,0,0, 0.9);
	  overflow-x: hidden;
	  transition: 0.5s;
	}

	#overlay-content {

	  position: relative;
	  top: 25%;
	  width: 100%;
	  text-align: center;
	  margin-top: 30px;
	}

	#navbarSupportedContent a {
		
	  padding: 8px;   
	  text-decoration: none;
	  font-size: 36px;
	  color: #818181;
	  display: block;
	  transition: 0.3s;
	}

<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-white">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <ul class="navbar-nav ml-auto" id="overlay-content">
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

当我尝试按一下按钮时，如果覆盖层太小，则覆盖层会下降，但无法到达100％的页面，然后突然又上升。有人可以帮助我吗？

提前谢谢！

Answer 1

之所以会这样，是因为您混淆了Bootstrap核心功能和习惯。

只需删除Bootstrap的 Collapse 类，因为您已经编写了JavaScript代码即可实现所需的功能。

添加以下CSS行：

  @media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: block;
    }
  }

由于Bootstrap 4媒体查询将为大于992px的屏幕隐藏与该类匹配的元素。

然后从HTML中删除所有与折叠相关的类：

<nav class="navbar navbar-expand-lg navbar-light bg-white">
   <button class="navbar-toggler" type="button" onclick="openNav()">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="" id="navbarSupportedContent">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <ul class="navbar-nav ml-auto" id="overlay-content">
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item pr-5">
          <a class="nav-link" href="#">Contacts</a>
        </li>
      </ul>
    </div>
  </nav>

这是一支活着的钢笔：https://codepen.io/alezuc/pen/dyYGobJ

希望这会有所帮助！

如何在引导程序中制作覆盖导航栏

1 个答案: