Dalam paparan mudah alih, bagaimana saya boleh menutup bar navigasi ini apabila pengguna mengklik pada pautan?

Question

Apabila pengguna mengklik pautan untuk menyemak imbas tapak web, bar navigasi tidak ditutup?

Saya telah cuba menambah pendengar acara klik pada setiap pautan untuk menutup bar navigasi, tetapi ia tidak berfungsi! Juga, ikon menu hamberberger dalam kedudukan aktif (iaitu X) tidak sejajar. Tetapi masalah utama ialah bar navigasi runtuh apabila diklik.

$(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

Saya menganggap anda telah menjadikan menu anda responsif - iaitu juga sesuai untuk peranti mudah alih.

1. Gunakan css skrin @media untuk ini
2. Tunjukkan ikon hamburger apabila lebar tetingkap serupa dengan tab atau peranti mudah alih, sembunyikan ikon ini jika tidak.
3. Tambah ikon tutup dalam div menu (mudah alih atau tab) untuk menutup menu.

Semoga penyelesaian ini membantu

Anda boleh merujuk kepada kod bar navigasi paparan mudah alih berikut dengan ikon hamburger.

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