jquery - 需要在引导程序中的桌面和移动版本的菜单中切换按钮

Question

在移动版打开网页时，菜单带有切换按钮，但在桌面打开时，它显示没有切换的菜单。

如何在引导程序中也显示桌面版本的切换按钮中的菜单？

标签： jquerycsshtmlbootstrap-4

Answer 1

$('.hamberger').click(function() {
		$('.hamberger-navbar').toggleClass('active-left');
});

body {
  margin: 0;
  list-style-type: none;
  }
header,
nav {
  display: block;
}
.container-fluid {
  list-style: none;
  font-weight: bold;
  width: 100%;
  text-align: center;
  background-color: #795548;
  height: 50px;
  float: left;
}
#navbar {
  position: relative;
  float:left;
  height: 50px;
  text-align: center;
}
#navbar ul {
  float: left;
  margin: 0px;
  padding: 0px;
  overflow: visible;
}
#navbar li {
  float: left;
  display: block;
  height: 19.5px;
}
#navbar a {
  float: left;
  text-decoration: none;
  color: #e0dbd1;
  font-family: verdana;
}
#navbar li a {
  float: left;
  display: block;
  padding: 15px;
  background-color: #795548;
  text-align: center;
  font-style: verdana;
}
.hamberger {
  display: none;
}
.hamberger {
  position: absolute;
  top: 30px;
  right: 15px;
  z-index: 999999;
  padding: 10px 35px 16px 0;
  cursor: pointer
}

.hamberger span,
.hamberger span:before,
.hamberger span:after {
  content: "";
  position: absolute;
  display: block;
  width: 35px;
  height: 3px;
  border-radius: 1px;
  border-color:#ffffff;
  background: #ffffff;
  cursor: pointer;
}

.hamberger span:before {
  top: -10px;
}

.hamberger span:after {
  bottom: -10px;
}

.hamberger span,
.hamberger span:before,
.hamberger span:after {
  transition: all 300ms ease-in-out;
}

.hamberger.active span {
  background-color: transparent
}

.hamberger.active span:before,
.hamberger.active span:after {
  top: 0;
}

.hamberger.active span:before {
  transform: rotate(45deg);
}

.hamberger.active span:after {
  top: 10px;
  transform: translatey(-10px)   rotate(-45deg);
}

@media (max-width: 1024px){
    .hamberger-navbar {
    position: fixed;
    left: -300px;
    width: 300px;
    transition: all 0.5s;
  }
  .hamberger-navbar.active-left {
    left: 0;
    position: relative;
  }
  .hamberger-navbar.active-left:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
  }
  #navbar {
    float: none;
    height: auto;
    position: relative;
    z-index: 99;
    margin-top: 50px;
  }
    #navbar ul {
    width: 100%;
    float: none;
  }
  #navbar li {
    float: none;
    height: auto;
    width: 100%;
  }
  #navbar li a {
    float: none;
  }
  .hamberger {
    float: left;
    margin: 17px 0 0 10px;
    position: fixed;
    top: 0;
    left: 20px;
    display: block;
  }
}
 @media (max-width: 991px){
  .hamberger-navbar {
    position: fixed;
    left: -300px;
    width: 300px;
    transition: all 0.5s;
  }
  .hamberger-navbar.active-left {
    left: 0;
    position: relative;
  }
  .hamberger-navbar.active-left:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
  }

  #navbar {
    float: none;
    height: auto;
    position: relative;
    z-index: 99;
    margin-top: 50px;
  }
  #navbar ul {
    width: 100%;
    float: none;
  }
  #navbar li {
    float: none;
    height: auto;
    width: 100%;
  }
  #navbar li a {
    float: none;
  }
  .hamberger {
    float: left;
    margin: 17px 0 0 10px;
    position: fixed;
    top: 0;
    left: 20px;
    display: block;
  }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div class="container-fluid">
      <div class="hamberger">
        <span></span>
      </div>
    <nav id="navbar" class="hamberger-navbar">
        <ul>
            <li><a class="active">Home</a></li>
          <li><a class="navigation">About Us</a></li>
            <li><a class="navigation">Products</a></li>
            <li><a class="navigation">Header Style</a></li>
            <li><a class="navigation">Blogs</a></li>
            <li><a class="navigation">Contact Us</a></li>
        </ul>
    </nav>
    </div>
</header>

看到这个我认为它对你有用。