Professional menu with JavaScript and jQuery

February 20, 2023

I have designed a menu for my WordPress site.

My menu has two main problems:

1- When I click on the icon, the ".back" class, which puts gray color on the whole screen, becomes black. so that the background becomes completely black.

2- The second problem is related to when I click on the gray area.
When on the body with the ".back" class. I made it, I click it, the menu closes, but the icon does not return to the previous state.

I put the codes that I wrote below so that you can better understand my problem and I hope you can help me in solving this problem.

Thanks.

let icon = document.querySelector(".icon_menu");
let nav = document.querySelector(".main_menu");

icon.addEventListener("click", function() {
  if (this.classList.contains("bi-grid-fill")) {
    this.classList = "bi bi-x-circle-fill icon_menu";

    icon.style.left = "25%";
    icon.style.color = "#ff6f6f";
    icon.style.fontSize = "30px";

    nav.style.left = 0;
  } else {
    this.classList = "bi bi-grid-fill icon_menu";

    icon.style.left = "2%";
    icon.style.color = "#a66fff";
    icon.style.fontSize = "40px";

    nav.style.left = "-300px";
  }

  $('body').append('<div class="back"></div>')
  $('.back').click(function() {
    icon.style.left = "2%";
    icon.style.color = "#a66fff";
    icon.style.fontSize = "40px";

    nav.style.left = '-300px';

    $(this).remove();
  });
});

.main_menu {
  position: absolute;
  top: 0;
  left: -300px;
  bottom: 0;
  z-index: 999;
  background: #eee;
  padding-right: 2rem;
  transition: all 1s ease;
}

.icon_menu {
  position: fixed;
  top: 10%;
  left: 2%;
  font-size: 40px;
  color: #a66fff;
  cursor: pointer;
  z-index: 99999;
  transition: all 1s ease;
}

.main_menu ul {
  list-style: none;
  line-height: 60px;
  font-size: 35px;
}

.main_menu ul li a {
  color: #000000;
  text-decoration: none;
  padding-right: 15px;
  padding-left: 40px;
  margin-left: -60px;
  margin-bottom: 10px;
}

.back {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9 !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000056;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <nav id="nav">
    <span class="bi bi-grid-fill icon_menu"></span>
    <aside class="main_menu">
      <ul>
        <li>
          <a href="#">
                            home
                        </a>
        </li>

        <li>
          <a href="#">
                            our articles
                        </a>
        </li>

        <li><a href="#">
                            about us
                        </a>
        </li>
      </ul>
    </aside>
  </nav>
</section>

>Solution :

Your first issue is caused because you keep adding/removing the element. This is bad practice, and inside you should just call .toggle() to hide/show it instead.

Your second issue is caused because you do only change the classes when the button is clicked, not the background.

Try this code instead:

let icon = document.querySelector(".icon_menu");
let nav = document.querySelector(".main_menu");

$('.back').hide();
$('.back').click(function() {
  if ($(this).is(':hidden')) return;
  $(this).toggle();
  
  icon.classList = "bi bi-grid-fill icon_menu";
  icon.style.left = "2%";
  icon.style.color = "#a66fff";
  icon.style.fontSize = "40px";

  nav.style.left = '-300px';
});

icon.addEventListener("click", function() {
  if (this.classList.contains("bi-grid-fill")) {
    this.classList = "bi bi-x-circle-fill icon_menu";
    icon.style.left = "25%";
    icon.style.color = "#ff6f6f";
    icon.style.fontSize = "30px";

    nav.style.left = 0;
  } else {
    this.classList = "bi bi-grid-fill icon_menu";
    icon.style.left = "2%";
    icon.style.color = "#a66fff";
    icon.style.fontSize = "40px";

    nav.style.left = "-300px";
  }
  $('.back').toggle();
});

.main_menu {
  position: absolute;
  top: 0;
  left: -300px;
  bottom: 0;
  z-index: 999;
  background: #eee;
  padding-right: 2rem;
  transition: all 1s ease;
}

.icon_menu {
  position: fixed;
  top: 10%;
  left: 2%;
  font-size: 40px;
  color: #a66fff;
  cursor: pointer;
  z-index: 99999;
  transition: all 1s ease;
}

.main_menu ul {
  list-style: none;
  line-height: 60px;
  font-size: 35px;
}

.main_menu ul li a {
  color: #000000;
  text-decoration: none;
  padding-right: 15px;
  padding-left: 40px;
  margin-left: -60px;
  margin-bottom: 10px;
}

.back {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9 !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #00000056;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <nav id="nav">
    <span class="bi bi-grid-fill icon_menu"></span>
    <aside class="main_menu">
      <ul>
        <li>
          <a href="#">home</a>
        </li>

        <li>
          <a href="#">our articles</a>
        </li>

        <li><a href="#">about us</a>
        </li>
      </ul>
    </aside>
  </nav>
</section>
<div class="back"></div>