如何构建导航栏以正常工作？

Question

基本上，我已经为我的网站创建了一个响应式导航栏。但是，我遇到了一个问题。当用户缩小浏览器大小并单击侧面的汉堡包时，导航栏不起作用。要解决此问题，用户必须刷新页面才能单击汉堡包以查看缩小尺寸的导航栏。我试图解决这个问题，但我不知道出了什么问题。如何确保在屏幕缩小时导航栏正常工作，以便用户不必刷新页面？任何帮助表示赞赏。下面是我的代码。

$(document).ready(function () {
  if (window.matchMedia('(max-width: 767.98px)').matches) {
    $(".navbar-toggle").click(function () {
      $(".navbar-toggle").toggleClass("cross");
      $("#navbarToggle").toggleClass("active");
      $("body").toggleClass("overflow-hidden");
    });
  }
});

header {
  -webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
  -moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
  box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
  position: relative;
  z-index: 999;
  transition: 0.6s;
}
/* header fixed on top with transition */
header.fixed-top {
  -webkit-transition: .4s;
  -ms-transition: .4s;
  -o-transition: .4s;
  -moz-transition: .4s;
  transition: .4s;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
  -moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
  box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
}
header .navbar-brand {
  padding: 0.5rem 0;
}

/* dropdown open on hover css start*/
.dropdown:hover > .dropdown-menu-hover {
  display: block;
}

.dropdown-menu.dropdown-menu-hover {
  margin-top: 0;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
  -ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
  animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
  border-radius: 6px !important;
}

.dropdown-menu.show {
  display: block !important;
}
/* dropdown open on hover css end*/

/* custom css for dropdown caret */
.dropdown-toggle::after {
  height: 8px;
  width: 8px;
  border: 0;
  border-right: 2px solid #757575;
  border-bottom: 2px solid #757575;
  transform: rotate(45deg);
  position: absolute;
  right:15px;
  top: 16px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.navbar-expand-lg .navbar-nav .nav-link.dropdown{
    padding-right: 2rem;
}
.navbar-nav .dropdown-toggle{
  color:rgba(0,0,0,.5);
}
.navbar-nav .dropdown-toggle:hover{
  text-decoration: none;
}
/* rounded buttons css */
.btn-round {
  border-radius: 40px;
}

/* css for mobile view */
@media (max-width: 991.98px) {
    div#navbarToggle {
    -webkit-transform: translateX(-120%);
    -ms-transform: translateX(-120%);
    transform: translateX(-120%);
    -webkit-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
    background: #fff;
    z-index: 11;
    position: fixed;
    left: 0;
    width: 300px;
    bottom: 0;
    top: 0;
    height: 100vh;
    -webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.15);
  }
  div#navbarToggle.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .navbar-nav .dropdown-menu{
    box-shadow: none !important;
  }
  .navbar-toggle {
    position: relative;
    background: #fff;
  }

  .navbar-toggle-icon {
    position: absolute;
    background: #a0a0a0;
    width: 100%;
    height: 2px;
    top: 50%;
    right: 0px;
    margin-top: 0px;
    opacity: 1;
  }

  .navbar-toggle-icon::before {
    position: absolute;
    background: #a0a0a0;
    width: 24px;
    height: 2px;
    top: 6px;
    content: "";
    display: block;
  }

  .navbar-toggle-icon::after {
    position: absolute;
    background: #a0a0a0;
    width: 24px;
    height: 2px;
    bottom: 6px;
    content: "";
    display: block;
  }

  .navbar-toggle-icon::after, .navbar-toggle-icon::before, .navbar-toggle-icon {
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
  }

  .navbar-toggle.cross .navbar-toggle-icon::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    bottom: 0px;
  }

  .navbar-toggle.cross .navbar-toggle-icon::before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: 0px;
  }

  .navbar-toggle.cross .navbar-toggle-icon {
    background-color: transparent;
  }

  header .navbar-light .navbar-toggle {
    border: 0;
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}

/* animation css for dropdown  */
@-webkit-keyframes m-dropdown-move-up {
  from {
    margin-top: 10px;
  }
  to {
    margin-top: 0;
  }
}
@keyframes m-dropdown-move-up {
  from {
    margin-top: 10px;
  }
  to {
    margin-top: 0;
  }
}
@-webkit-keyframes m-dropdown-arrow-move-up {
  from {
    margin-top: 10px;
  }
  to {
    margin-top: 0;
  }
}
@keyframes m-dropdown-arrow-move-up {
  from {
    margin-top: 10px;
  }
  to {
    margin-top: 0;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Navbar</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
  </head>
<body translate="no" >
  <header class="fixed-top">
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container-fluid container-xl">
            <a class="navbar-brand" href="javascript:void(0)">
              <h1>Logo</h1>
            </a>
            <div class="navbar-toggle" data-toggle="collapse" data-target="navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggle-icon"></span>

            </div>

            <div class=" navbar-collapse" id="navbarToggle">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item ">
                        <a class="nav-link active" href="javascript:void(0)">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="javascript:void(0)">About</a>
                    </li>
                  
                   
                    <li class="nav-item">

                        <div class="dropdown cursor-pointer align-items-center nav-link">
                            <a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
                               aria-haspopup="true" aria-expanded="false">
                                Dropwown
                            </a>
                            <div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
                                 aria-labelledby="data-nav">
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>All</span>
                                </a>
                                <a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
                                    <span>Menu 1</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 2</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 3</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 4</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 5</span>
                                </a>
                                

                            </div>
                        </div>

                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="javascript:void(0)">
                            Contact us
                        </a>
                    </li>
                                    </ul>
                  <div class="nav-buttons">
                    <div class="nav-item">
                        <a class="btn btn-round btn-outline-primary btn-light ml-3 btn-sm" href="javascript:void(0)">
                            Login
                        </a>
                        <a class="btn btn-round btn-primary ml-3 btn-sm" href="javascript:void(0)">
                            Sign Up
                        </a>
                    </div>
              </div>
       </div>
    </nav>
</header>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

这是仅使用 bootstrap 4 类制作的响应式导航栏。

我认为它与您想要的不完全相同。但是，请检查并 拿一些参考。我试着让它和你的一样。

CSS 代码

 <style>
      header {
      -webkit-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
      -moz-box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
      box-shadow: 0 0.05rem 1rem rgba(87, 87, 173, 0.77);
      position: relative;
      z-index: 999;
      transition: 0.6s;
    }
    /* header fixed on top with transition */
    header.fixed-top {
      -webkit-transition: .4s;
      -ms-transition: .4s;
      -o-transition: .4s;
      -moz-transition: .4s;
      transition: .4s;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      -webkit-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
      -moz-box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
      box-shadow: 0 0.5rem 1rem rgba(154, 154, 197, 0.24);
    }
    header .navbar-brand {
      padding: 0.5rem 0;
    }
    
     .navbar-toggle {
        position: relative;
        background: #fff;
      }
    
    /* dropdown open on hover css start*/
    .dropdown:hover > .dropdown-menu-hover {
      display: block;
      text-decoration: none;
      
    }
    
    a{
        color: darkgrey;
      }
      
    .dropdown-menu.dropdown-menu-hover {
      margin-top: 0;
      background-color:#f8f9fa!important;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
      -ms-animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
      animation: .3s ease-out m-dropdown-move-up, .3s ease-out m-dropdown-move-up;
      border-radius: 6px !important;
    }
    
    /* animation css for dropdown  */
    @-webkit-keyframes m-dropdown-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
      @keyframes m-dropdown-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
    @-webkit-keyframes m-dropdown-arrow-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
    @keyframes m-dropdown-arrow-move-up {
      from {
        margin-top: 10px;
      }
      to {
        margin-top: 0;
      }
    }
      </style>

HTML 代码

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin:24px 0;">
  <a class="navbar-brand" href="javascript:void(0)">Logo</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navb">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>
      <li class="nav-item">
        <div class="dropdown cursor-pointer align-items-center nav-link">
                            <a class="dropdown-toggle" id="data-nav" href="/data" data-toggle="dropdown"
                               aria-haspopup="true" aria-expanded="false">
                                Dropdown
                            </a>
                            <div class="dropdown-menu dropdown-menu-hover dropdown-menu-right shadow border-0 "
                                 aria-labelledby="data-nav">
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>All</span>
                                </a>
                                <a class="dropdown-item d-flex" href="https://flickity.metafizzy.co/" target="blank">
                                    <span>Menu 1</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 2</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 3</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 4</span>
                                </a>
                                <a class="dropdown-item d-flex" href="javascript:void(0)">
                                    <span>Menu 5</span>
                                </a>
                                

                            </div>
                        </div>
      </li>
       <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>
    </ul>
     <div class="nav-buttons">
                    <div class="nav-item">
                        <a class="btn btn-round btn-outline-primary btn-light ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
                            Login
                        </a>
                        <a class="btn btn-round btn-primary ml-lg-3 my-sm-2 btn-sm" href="javascript:void(0)">
                            Sign Up
                        </a>
                    </div>
              </div>
  </div>
</nav>

</body>