What steps can I take to design a functional hamburger menu?

Question

What steps can I take to design a functional hamburger menu?

After multiple attempts to create a hamburger menu, I have hit a roadblock. Clicking on the menu icon transforms it into an 'X', but unfortunately, it does not trigger the opening of the menu. Despite days of effort and research, I have yet to find a solution that actually works.

Below is the 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>

Although I attempted the provided approach, it did not yield the intended result. My goal is to achieve a sliding effect to open the menu upon clicking the hamburger menu icon.

javascript html css navigationbar hamburger-menu

Answer 1

Answer №1

Feel free to refer to this as a demonstration

const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.content');

toggleBtn.addEventListener('click', () => {
  toggleBtn.classList.toggle('active');
  content.classList.toggle('active');
});

/* Toggle button */

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

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

/* Toggle button animation */

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

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

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

/* Slide content */

.content {
  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;
}

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

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

/* Slide content animation */

.content.active {
  right: 0;
}

.content.active a:hover {
  color: #f00;
}

<header>
  <nav>
    <div class="toggle-btn">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul class="content">
      <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>

Answer 2

Feel free to refer to this as a demonstration

const toggleBtn = document.querySelector('.toggle-btn');
const content = document.querySelector('.content');

toggleBtn.addEventListener('click', () => {
  toggleBtn.classList.toggle('active');
  content.classList.toggle('active');
});

/* Toggle button */

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

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

/* Toggle button animation */

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

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

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

/* Slide content */

.content {
  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;
}

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

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

/* Slide content animation */

.content.active {
  right: 0;
}

.content.active a:hover {
  color: #f00;
}

<header>
  <nav>
    <div class="toggle-btn">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <ul class="content">
      <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>

Answer 3

Answer №2

@MohammedMalek's design may be slightly superior to this one, but here is another example for your consideration

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 explore CSS-only solutions online for this issue - I personally prefer the JavaScript version for simplicity, but it's always good to have options.

Answer 4

@MohammedMalek's design may be slightly superior to this one, but here is another example for your consideration

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 explore CSS-only solutions online for this issue - I personally prefer the JavaScript version for simplicity, but it's always good to have options.

What steps can I take to design a functional hamburger menu?

Answer №1

Answer №2

Similar questions

How can I retrieve items from an object that are contained within a nested array with a specific value

The fixed position seems to be malfunctioning and behaving more like absolute

What's Next? Redirecting Pages in Node.js Express after Handling POST Requests

Is server-side rendering necessary for `browserHistory` in React Router?

How to implement an instance method within a Typescript class for a Node.js application

Error encountered when attempting to retrieve JSON data in JavaScript due to being undefined

How can one remove surrounding paragraph texts using BeautifulSoup in Python?

"An error occurs when trying to trigger a .click() event within a list element

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

Increasing the upward motion of the matrix raining HTML canvas animation

What is the Significance of the Height in This Sample Menu?

What is the best way to send a JSON object in Vue.js?

Optimizing web content for iOS Safari with min-height media queries

Passing form values from JavaScript to a JSP page - a comprehensive guide

Incorporating object into main function of VueJS root component

What is the best way to send an array of objects to a Node.js server?

Why does my Node.JS Express request return undefined after submitting a post request from a form?

Whenever I attempt to implement NavigationContainer in react native, an error always pops up

CSS based on conditions for 2 specific divs

"Troubleshooting issue: jQuery AJAX encountering problems with parsing JSON