Building a responsive mobile menu with HTML, CSS, and JavaScript

In today's world, it's almost impossible to imagine a website without a responsive mobile menu. With the majority of internet users browsing websites on their mobile devices, it's essential to create a seamless user experience across all devices, and having a responsive mobile menu is a crucial part of achieving that.

In this blog, we'll take a look at how to build a responsive mobile menu with HTML, CSS, and JavaScript. We'll cover the basics of creating a simple menu, and then we'll explore how to make it responsive, meaning that it will adapt to different screen sizes and devices.

Getting Started: Creating a Basic Menu

Before we dive into making our menu responsive, let's start by creating a basic menu. We'll use HTML to structure the menu, and CSS to style it. Here's what our HTML markup might look like:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Here, we've created a nav element that contains an unordered list (ul) of menu items. Each menu item is a list item (li) that contains a link (a) to the relevant page.

Now, let's use CSS to style our menu. Here's some CSS code that will give our menu a basic style:

nav {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

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

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

Here, we've set the background color of our nav element to #333 and the text color to white. We've also added some padding to the nav element to give our menu some breathing room.

Next, we've used CSS to remove the default bullet points from our unordered list (ul) and remove any default margins and padding. We've set the display property of our list items (li) to inline-block so that they display horizontally. We've also added a margin-right property to create some space between each menu item.

Finally, we've styled our links (a) by setting the text color to white, removing the underline (text-decoration: none), and adjusting the font size and weight.

Adding JavaScript: Making the Menu Responsive

Now that we've created a basic menu, let's make it responsive. To do this, we'll use JavaScript to toggle a class on our nav element when the user clicks on a button. This class will change the appearance of our menu, allowing it to be displayed differently on smaller screens.

First, let's add a button to our HTML that will allow users to toggle the menu:

<nav>
  <button class="menu-toggle">Menu</button>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Here, we've added a button element with a class of menu-toggle before our unordered list. This button will serve as the trigger for our responsive menu.

Next, let's use JavaScript to add a click event listener to our button. Here's some code that will toggle a class of active on our nav element when the button is clicked:

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

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

Here, we've selected our button and nav elements using their class and element selectors. We've then added a click event listener to our button that toggles the active class on our nav element using the classList.toggle() method.

Finally, let's use CSS to style our responsive menu. Here's some code that will hide our unordered list by default and display it when the active class is present on our nav element:

nav ul {
  display: none;
}

nav.active ul {
  display: block;
  text-align: center;
}

nav.active ul li {
  display: block;
  margin-bottom: 20px;
}

nav.active ul li:last-child {
  margin-bottom: 0;
}

Here, we've set the display property of our unordered list to none by default. We've then added some CSS code that will display our unordered list and center it when the active class is present on our nav element. We've also adjusted the display property of our list items to block, added some margin to create space between each item, and removed the margin from the last item.

Conclusion

In this blog, we've covered the basics of creating a responsive mobile menu with HTML, CSS, and JavaScript. We started by creating a simple menu using HTML and CSS, and then we used JavaScript to make it responsive. By toggling a class on our nav element, we were able to change the appearance of our menu on smaller screens, making it more user-friendly and accessible. With these techniques, you can create a responsive mobile menu that will enhance the user experience of your website.