如何在引导程序中制作覆盖导航栏
[英]how to make overlay navigation bar in bootstrap
问题描述
i'm just learning about front end.
我只是在学习前端。 i have a problem to make an overlay navigation bar instead of dropdown menu when it reach extra small page.当它到达超小页面时，我无法制作覆盖导航栏而不是下拉菜单。 so this is what i've done:所以这就是我所做的：
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()">×</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>
when i try to hit the button when it reach extra small, the overlay goes down but it doesn't reach a hundred percent page and it suddenly goes up again.当我尝试按下按钮时，它变得特别小，覆盖下降但它没有达到百分之一百的页面，它突然又上升了。 does anyone can help me?有人可以帮助我吗？
thanks in advance !提前致谢 ！
1 个解决方案
解决方案1
1 已采纳 2020-04-15 08:50:32
This is happening because you are mixing up Bootstrap core functions and your customs.发生这种情况是因为您将 Bootstrap 核心功能和您的习惯混为一谈。
Simply remove the Collapse classes of Bootstrap, since you already write your javascript code to achieve what you need.只需删除 Bootstrap 的Collapse类，因为您已经编写了 javascript 代码来实现您所需要的。
Add this line of CSS:添加CSS这一行：
@media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
Since Bootstrap 4 Media Queries will hide an element matching that class for a screen bigger than 992px.由于 Bootstrap 4 媒体查询将隐藏与 class 匹配的元素，用于大于 992 像素的屏幕。
And then remove all the collapse-related class from your HTML:然后从 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()">×</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>
Here's a live working pen: https://codepen.io/alezuc/pen/dyYGobJ这是一支带电工作的笔： https://codepen.io/alezuc/pen/dyYGobJ
Hope this helps!希望这可以帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.