Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt?

Question

Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigationsleiste nicht geschlossen?

Ich habe versucht, jedem Link Klickereignis-Listener hinzuzufügen, um die Navigationsleiste zu schließen, aber es funktioniert nicht! Außerdem ist das Hamberberger-Menüsymbol in der aktiven Position (d. h. das X) nicht gut ausgerichtet. Das Hauptproblem besteht jedoch darin, dass die Navigationsleiste beim Klicken zusammenbricht.

$(document).ready(function() {
  $('.container').click(function() {
    $('.navbar .menu').toggleClass("active");
  });
});
function myFunction(x) {
x.classList.toggle("change");
}
        

@media (max-width: 1104px) {
.about .about-content .left img {
    height: 350px;
    width: 350px;
}
}

@media (max-width: 991px) {
.max-width {
    padding: 0 50px;
}
}

@media (max-width: 947px) {
.menu-btn {
    display: block;
    z-index: 999;
}
/* .menu-btn i.active:before {
    content: "\f00d";
} */
.navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #111;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
}
.navbar .menu.active {
    left: 0;
}
.navbar .menu li {
    display: block;
}
.navbar .menu li a {
    font-family: 'Josefin Sans', sans-serif;
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
}
}
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: crimson;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  position: relative;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  border: 3px solid #fff;
  padding: 0px 10px;
  text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
  letter-spacing: 2px;
}

.navbar .logo a::after {
  content: 'PANDEY';
  position: absolute;
  font-size: 15px;
  font-weight: bold;
  bottom: -12px;
  /* color: crimson; */
  right: 15px;
  background: crimson;
  border-radius: 5px;
  /* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
  padding: 0px 4px;
  letter-spacing: 2px;
}

.navbar .logo a span {
  color: crimson;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a::after {
  border-radius: 4px;
  background: #fff;
  color: crimson;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}

.container {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.bar1 {
  width: 35px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar2 {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar3 {
  width: 15px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -6px) rotate(40deg);
  width: 35px;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  font-family: 'Josefin Sans', sans-serif;
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  position: relative;
  color: #fff;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1  /jquery.min.js"></script>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">Chhailbihari</a></div>
    <ul class="menu">
      <li class="menu-btn"><a href="#home">Home</a></li>
      <li class="menu-btn"><a href="#about">About</a></li>
      <li class="menu-btn"><a href="#services">Services</a></li>
      <li class="menu-btn"><a href="#skills">Skills</a></li>
      <li class="menu-btn"><a href="#contact">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    </div>
  </div>
</nav>

Answer 1

我认为您已经制作了响应式菜单 - 即也适用于移动设备。

1. 为此使用@media screen css
2. 当窗口宽度类似于选项卡或移动设备时显示汉堡包图标，否则隐藏此图标。
3. 在菜单 div（移动设备或标签页）中添加关闭图标以关闭菜单。

希望这个解决方案有帮助

您可以参考以下带有汉堡包图标的移动视图导航栏代码。

body
{
  margin: 0;
  padding: 0;
  background: blue;
  color: #cdcdcd;
 
}
#togglmenu
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#togglmenu a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}
#togglmenu a:hover
{
  color: tomato;
}
#togglmenu input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
#togglmenu span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#togglmenu span:first-child
{
  transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
  padding: 10px 0;
  font-size: 22px;
}
#togglmenu input:checked ~ ul
{
  transform: none;
}

  

    
    
    
    
    

      
Home
      
About
      
Info
      
Contact