Question 44071 in Html Question posted in
Some basic documentation can be found here.

How do I create a functioning hamburger menu? – Html

So I have tried to create a hamburger menu and have faced no luck. Whenever I click on the menu icon, it changes to an ‘X’ however it does not open the menu. I have been trying for the last couple of days, and have also researched but have found nothing that works.

Here is my HTML code for the navmenu and hamburger icon:

let menu = document.querySelector('#menu-icon');
let navmenu = document.querySelector('.navmenu');

menu.onclick = () => {
  menu.classList.toggle('bx-x');
  navmenu.classList.toggle('open');
}
.navmenu {
  display: flex;
}

.navmenu a {
  color: #000;
  font-size: 16px;
  text-transform: capitalize;
  padding: 10px 20px;
  font-weight: 400;
  transition: all .42s ease;
}

.navmenu a:hover {
  color: #03A9F4;
}

.nav-icon {
  display: flex;
  align-items: center;
}

.nav-icon i {
  margin-right: 20px;
  color: #ffffff;
  font-size: 25px;
  font-weight: 400;
  transition: all .42s ease;
}

.nav-icon i:hover {
  transform: scale(1.1);
  color: #03A9F4;
}

#menu-icon {
  font-size: 35px;
  display: none;
  color: #ffffff;
  z-index: 10001;
  cursor: pointer;
}

@media(max-width: 750px) {
  #menu-icon {
    display: block;
  }
  .navmenu {
    position: absolute;
    top: -100%;
    right: 0%;
    width: 300px;
    height: 130vh;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 30px;
    transition: all .42s;
  }
  .navmenu a {
    display: block;
    margin: 10px 0;
  }
  .navmenu.open {
    right: 0%
  }
}
<a href="#" class="logo"><img src="images/logo5.png" alt="" class="prevent-select"></a>
<ul class="navmenu">
  <li><a href="#" id="prevent-select" class="hover-underline-animation">Home</a></li>
  <li><a href="#" id="prevent-select" class="hover-underline-animation">Shop</a></li>
  <li><a href="#" class="hover-underline-animation" id="prevent-select">Sale</a></li>
  <li><a href="#" class="hover-underline-animation" id="prevent-select">Contact</a></li>
  <li><a href="#" class="hover-underline-animation" id="prevent-select">Policies</a></li>
  <li><a href="#" class="hover-underline-animation" id="prevent-select">More</a></li>
</ul>
<div class="nav-icon">
  <a href="#" id="prevent-select"><i class='bx bx-search-alt-2'></i></a>
  <div class="dropdown2">
    <button class="dropbtn2">
                        <a href="#" id="prevent-select"><i class='bx bx-user'></i></a>
                    </button>
    <div class="dropdown-content2">
      <div class="login">
        <ul>
          <a href="login_register.php" id="prevent-select">Log in/Register</a>
        </ul>
      </div>
    </div>
  </div>
  <a href="#" id="prevent-select"><i class='bx bx-shopping-bag'></i></a>
  <div class="bx bx-menu" id="menu-icon"></div>
</div>

I tried this but it did not work as it had resulted in what I had mentioned above. I basically want it to slide the menu open when I click the hamburger menu icon.

Tags:

2

Answers


  1. 0

    You can use this as an example

    const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');

menuBtn.addEventListener('click', () => {
  menuBtn.classList.toggle('active');
  menu.classList.toggle('active');
});
    /* Hamburger menu button */

.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  margin-right: 20px;
}

.menu-btn span {
  width: 30px;
  height: 4px;
  background-color: #333;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

/* Hamburger menu button animation */

.menu-btn.active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.menu-btn.active span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Slide menu */

.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 250px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 50px 20px;
  transition: all 0.3s ease-in-out;
}

.menu li {
  margin-bottom: 20px;
}

.menu a {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

/* Slide menu animation */

.menu.active {
  right: 0;
}

.menu.active a:hover {
  color: #f00;
}
    <header>
  <nav>
    <div class="menu-btn">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
    Login or Signup to reply.
  2. 0

    @MohammedMalek’s is a little better than this one, but another example, just in case you’re interested

    function toggleMenu() {
    document.getElementById("menu").classList.toggle("active");
}
    .container{
  width: 300px;
  border: 1px solid black;
  overflow: hidden;
}

.hamburger{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.line{
  height: 4px;
  width: 100%;
  background-color: black;
  border-radius: 2px;
}

.line::before{
  height: 4px;
  width: 100%;
  background-color: black;
  margin-top: -8px;
  content: '';
  display: block;
  border-radius: 2px;
}

.line::after{
  content: '';
  height: 4px;
  width: 100%;
  display: block;
  background-color: black;
  margin-top: 12px;
  border-radius: 2px;
}

.list{
  transform: translateX(-100%);
  border: 1px solid black;
  transition: transform .5s;
}

.list.active{
  transform: translateX(0%);
}
    <div class="container">
  <div class="hamburger" onclick="toggleMenu()">
    <div class="line">
    
    </div>
  </div>
  
  <div id="menu" class="list">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

    You can also google around and find CSS-only solutions to this problem – I personally find the JS version much easier to deal with, but I’ll throw it out there anyways.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search