Skip to main content

Creating a Responsive Hamburger Menu with JavaScript and CSS

· 4 min read
Skill Upwards

"Creating a Responsive Hamburger Menu with JavaScript and CSS"

Introduction​

A responsive hamburger menu is a common navigation pattern used in mobile and responsive web design. It provides a compact menu icon that expands into a full navigation menu when clicked.

In this blog post, we'll learn how to create a responsive hamburger menu using HTML, CSS, and JavaScript, enhancing the user experience on small screens.

Suggested Tutorials 📑:​

1. HTML Structure​

Let's start by creating the HTML structure for our responsive hamburger menu. We'll use a header element to contain the logo and the hamburger menu icon. The navigation menu will be contained in a nav element. 


<!DOCTYPE html>
<html>
<head>
  <title>Hamburger Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="header">
    <div class="logo">Your Logo</div>
    <div class="menu-toggle" id="menu-toggle">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
  <div class="nav" id="nav">
    <ul>
      <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>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. CSS Styling​

Create a styles.css file to style your hamburger menu. We'll use flexbox to position the logo and the hamburger menu icon side by side.


body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.header {
  background-color: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu-toggle {
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 30px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
}

.nav {
  display: none;
}

.nav.active {
  display: block;
}

.nav ul {
  list-style-type: none;
  padding: 0;
}

.nav li {
  padding: 10px;
  text-align: center;
}

.nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .nav {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: white;
    border-top: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
}

Suggested Tutorials 📑:​

3. JavaScript Functionality​

Implement the JavaScript functionality in your script.js file. We'll use the classList.toggle() method to toggle the active class on the navigation menu when the hamburger menu icon is clicked. 


const menuToggle = document.getElementById('menu-toggle');
const nav = document.getElementById('nav');

menuToggle.addEventListener('click', () => {
  nav.classList.toggle('active');
});

Suggested Tutorials 📑:​

Conclusion​

In this blog post, we learned how to create a responsive hamburger menu using HTML, CSS, and JavaScript. We used flexbox to position the logo and the hamburger menu icon side by side. We also used the classList.toggle() method to toggle the active class on the navigation menu when the hamburger menu icon is clicked.

We hope you found this article helpful.

Happy coding! 🚀