javascript - 如何将菜单更改为响应式引导菜单-6ren

javascript - 如何将菜单更改为响应式引导菜单

转载作者：行者123 更新时间：2023-12-03 18:53:15

我想在 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>

最佳答案

这是使用 Bootstrap 5.0 中的导航栏的页面版本，其中 Logo 位于中心以进行更大的显示。
更新
在我最初的回答中，我在布局上作弊，使用了两个 Logo ，一个用于移动设备，一个用于更大的显示器，以使四个链接周围的间距和 Logo 通过使用“justify-content-evenly”来匹配原始请求。确实在所有元素之间以及浏览器边缘与第一个和最后一个元素之间提供了相等的空间，但它具有重复的内容。
在我的更新中，我使用一个 Logo 并拆分两个导航栏折叠列表之间的链接。将链接拆分为两个单独的导航栏折叠列表，为大屏幕上的 Logo 提供了一个中间位置。我用 order: 2将 Logo 从小屏幕上的导航栏左侧移动到宽屏幕上的中间。
使用 flex-grow-1 将两个 navbar-collapse div 设置为展开以适应可用空间。 ul navbar-collapse div 中的列表设置为 w-100和 justify-content-evenly将两个链接分开。
因为有两个 navbar-collapse div，我修改了 navbar-toggler 按钮以使用 data-bs-target 的类值而不是 id，并列出了 aria-controls="navbarContent1 navbarContent2" 的两个 navbar-collapse div 的 id两个 id 之间有一个空格。
虽然最初的问题是关于让 Bootstrap 5 导航栏与示例匹配，但我还修改了 Green Sock 动画 (GASP) 的设置:

添加了用于加载、调整大小、方向的监听器以配置或重新配置 gasp 设置。

从 innerWidth 切换到 document.documentElement.clientWidth – innerWidth 包括宽度中的滚动条，如果有滚动条，它将向右移动 blob。 clientWidth 避免了这个问题。

修改了 blob 的 svg 路径——原来的路径有点不均匀。

const nav = document.querySelector(".navbar");
const blob = document.querySelector("svg.nav-blob");

function initiateBlob() {
    gsap.set(blob, {
        xPercent: -50,
        x: document.documentElement.clientWidth / 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: document.documentElement.clientWidth / 2,
        overwrite: 'auto'
    });

});

window.addEventListener('load', initiateBlob, false);
window.addEventListener('resize', initiateBlob, false);
window.addEventListener('orientationchange', initiateBlob, false);

body {
    font-family: "Open Sans Condensed";
    background: black;
}

h1 {
    font-family: "Open Sans Condensed";
    font-size: 2.2em;
    font-weight: 600;
}

.logo {
    max-width: 160px;
}

a.nav-link {
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-family: "Roboto";
    font-weight: 600;
    color: #358E9D;
    text-transform: uppercase;
    padding: 10px 20px 20px 20px;
}

.navbar-nav .nav-link {
    padding-left: 1rem;
}

svg.nav-blob {
    position: absolute;
    top: 100%;
    left: 0;
    height: 20px;
    z-index: 1;
    display: none;
}

svg.nav-blob path {
    fill: white;
}

@media (min-width:768px) {
    .sr-md-only {
        position: absolute;
        left: -10000px;
        top: auto;
        overflow: hidden;
    }

    a.nav-link {
        line-height: 70px;
    }

    .nav-item {
        width: 6.75rem;
        text-align: center;
    }

    .navbar-expand-md {
        justify-content: space-evenly;
    }

    svg.nav-blob {
        display: block;
    }

    .card-img, .card-img-top {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet">

<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>


    
<nav class="navbar navbar-light navbar-expand-md bg-white">
    <div class="container-lg">
        <a href="/" class="navbar-brand mx-md-0 p-2 d-block order-md-2"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" alt="Logo image" /></a>

        <button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target=".navbarContent" aria-controls="navbarContent1 navbarContent2" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div id="navbarContent1" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-1">
            <ul class="navbar-nav w-100 justify-content-evenly">
                <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="#">DINE</a>
                </li>
            </ul>
        </div>

        <div id="navbarContent2" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-3">
            <ul class="navbar-nav w-100 justify-content-evenly">
                <li class="nav-item">
                    <a class="nav-link" href="#">HOTELS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CONTACT</a>
                </li>
            </ul>
        </div>
        <svg class="nav-blob" viewBox="0 0 200 20">
            <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 140 0 200 0 Z"></path>
        </svg>
    </div>
</nav>

<div class="container-fluid mb-3 mt-0 p-0">
    <div class="row gx-0">
        <div class="col-12 col-md-6">
            <div class="card bg-dark text-white text-center border-top-0">
                <img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image">
                <div class="card-img-overlay">
                    <h2 class="card-title"> HEADING ONE</h2>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="card bg-dark text-white text-center border-top-0">
                <img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image">
                <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>

<div class="container">
    <div class="row">
        <div class="col-12 vh-100">
            <p>Section to give height to the page.</p>
        </div>
    </div>
</div>