html Bootstrap 5单击后关闭导航栏

20jt8wwn  于 2022-12-09  发布在  Bootstrap
关注(0)|答案(1)|浏览(225)

我没有太多的经验与 Bootstrap 。我发现这个代码在互联网上,我不明白如何javascript在html工程。我希望汉堡菜单关闭后,选择一个项目在导航栏。当然在移动的版本
有人能帮我吗?
git hub address
github page

<!-- Page Navbar -->
<nav class="custom-navbar" data-spy="affix" data-offset-top="20">
    <div class="container">
        <a class="logo" href="index.html">Portfolio</a>         
        <ul class="nav">
            <li class="item">
                <a class="link" href="#home">Home</a>
            </li>
            <li class="item">
                <a class="link" href="#about">About</a>
            </li>
            <li class="item">
                <a class="link" href="#portfolio">Portfolio</a>
            </li>
            <li class="item">
                <a class="link" href="#testmonial">Testmonial</a>
            </li>
            <li class="item">
                <a class="link" href="#blog">Blog</a>
            </li>
            <li class="item">
                <a class="link" href="#contact">Contact</a>
            </li>
            <li class="item ml-md-3">
                <a href="components.html" class="btn btn-primary">Components</a>
            </li>
        </ul>
        <a href="javascript:void(0)" id="nav-toggle" class="hamburger hamburger--elastic">
            <div class="hamburger-box">
              <div class="hamburger-inner"></div>
            </div>
        </a>
    </div>          
</nav><!-- End of Page Navbar -->
ezykj2lf

ezykj2lf1#

我对Bootstrap逻辑没有太多的经验,但在我看来,我们可以只用类和Bootstrap的属性来实现汉堡菜单,我们不需要Javascript。
下面的例子是从Bootstrap Docs(导航栏〉响应行为〉画布外导航栏)编辑的。我添加了一些注解来帮助你理解下面的代码在创建什么。我不能让下面的代码片段在stackoverflow中工作,但是我已经在CodePen中测试过了,它工作得很好。
如您所见,打开/关闭菜单的逻辑是通过名为"data-bs-toggle"、"data-bs-target"和"data-bs-dismiss"的html属性实现的。前两个是打开菜单按钮的属性,最后一个用于关闭菜单按钮上的菜单。
在菜单内的链接中,我们看不到"data-bs-dismiss"属性,因为它应该打开一个不同的窗口(我认为),但如果在您的情况下,您停留在同一个窗口中,也许您也可以在链接中添加此属性。
我不会试图更好地解释这一点,因为我也不明白的细节...但重要的是,它的工作,我想。

<!--import Bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Actual example -->
    <nav class="navbar bg-light fixed-top">
      <div class="container-fluid">
        
        <!-- Header Menu -->
        <a class="navbar-brand" href="#">Offcanvas navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Inside the hamburguer menu -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
          
          <!-- Title and close button -->
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          
          <!-- Menu items in an unordered list-->
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <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="#">Link</a>
              </li>
            </ul>
            <form class="d-flex mt-3" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </div>
    </nav>

相关问题