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

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

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

26

4

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

我用相同大小的占位符图像替换了原始图像。
如何处理移动菜单的单独菜单项来自另一个问题的答案: Bootstrap 4 navbar with brand center and links on the left, center and right

关于javascript - 如何将菜单更改为响应式引导菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66513595/

26

4

0

文章推荐： nuxt.js - 无法使用 Nuxt/Tailwind 安装字体

文章推荐： iphone - AVAudioPlayer - 计量 - 想要构建波形(图)

文章推荐： iPhone Ad Hoc 分发无期限

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

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