【发布时间】：2021-06-05 09:02:22
【问题描述】：
我想在 codepen 中显示的示例中使用 bootstrap 5 响应式菜单，我尝试了一些东西，但它总是以一种或一种方式破坏。
https://codepen.io/KGuide/pen/WNogyyV
我想使用引导菜单并替换当前菜单，以便该菜单响应大屏幕悬停动画。
<nav class="navbar navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, {xPercent: -50, x:innerWidth / 2});
nav.addEventListener("mousemove", function(e){
gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'});
});
nav.addEventListener("mouseleave", function(e){
gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`});
}); body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet">
<div class="containerx nav-container">
<nav>
<a href="#">HOME</a>
<a href="#">DINE</a>
<a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a>
<a href="#">HOTELS</a>
<a href="#">CONTACT</a>
</nav>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- <nav class="navbar navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav> -->
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
您希望菜单在较小的/'移动屏幕上看起来像什么？
-
@Zim 作为顶部带有徽标的引导可折叠菜单
标签： javascript html css bootstrap-5