如何在引導程序中制作覆蓋導航欄

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>

當我嘗試按下按鈕時，它變得特別小，覆蓋下降但它沒有達到百分之一百的頁面，它突然又上升了。 有人可以幫助我嗎？

提前致謝！

Answer 1

發生這種情況是因為您將 Bootstrap 核心功能和您的習慣混為一談。

只需刪除 Bootstrap 的Collapse類，因為您已經編寫了 javascript 代碼來實現您所需要的。

添加CSS這一行：

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

由於 Bootstrap 4 媒體查詢將隱藏與 class 匹配的元素，用於大於 992 像素的屏幕。

然后從 HTML 中刪除所有與崩潰相關的 class：

<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 個解決方案

解決方案1
1 已采納 2020-04-15 08:50:32

如何在引導程序中制作覆蓋導航欄

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-15 08:50:32

解決方案1
1 已采納 2020-04-15 08:50:32