如何構建導航欄以正常工作？

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>