Creating a responsive mega menu with HTML, CSS, and JavaScript

A mega menu is a navigation menu that typically displays a large amount of information in a multi-column format. It is an effective way to organize a large number of categories and subcategories while still keeping everything easily accessible. In this blog, we will go through the steps to create a responsive mega menu using HTML, CSS, and JavaScript.

Step 1: HTML Structure

The first step is to create the HTML structure for the mega menu. The basic structure will consist of an unordered list (<ul>) that will serve as the main container for the menu. Each list item (<li>) in the menu will represent a category, and each category may have multiple subcategories. The subcategories will be nested inside a sub-menu container, which will be hidden by default.

Here is an example HTML structure for a mega menu:

<nav class="mega-menu">
  <ul>
    <li>
      <a href="#">Category 1</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Subcategory 1.1</a></li>
          <li><a href="#">Subcategory 1.2</a></li>
          <li><a href="#">Subcategory 1.3</a></li>
          <li><a href="#">Subcategory 1.4</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">Category 2</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Subcategory 2.1</a></li>
          <li><a href="#">Subcategory 2.2</a></li>
          <li><a href="#">Subcategory 2.3</a></li>
          <li><a href="#">Subcategory 2.4</a></li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">Category 3</a>
      <div class="sub-menu">
        <ul>
          <li><a href="#">Subcategory 3.1</a></li>
          <li><a href="#">Subcategory 3.2</a></li>
          <li><a href="#">Subcategory 3.3</a></li>
          <li><a href="#">Subcategory 3.4</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Note that each category (<li>) has an anchor tag (<a>) that serves as a clickable link to the category page. The sub-menu container (<div class="sub-menu">) contains another unordered list (<ul>) that represents the subcategories. This container is hidden by default and will be displayed only when the user hovers over the category.

Step 2: Basic Styling with CSS

Next, we need to add some basic styling to the mega menu using CSS. We'll start by setting the basic styles for the menu, such as the font, font size, and background color. We'll also set the styles for the list items, anchor tags, and sub-menu containers.

Here is an example CSS code for basic styling:

.mega-menu {
  font-family: Arial, sans-serif;
  font-size: 14px;
  background-color: #f2f2f2;
}

.mega-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.mega-menu li {
  position: relative;
  flex: 1;
  text-align: center;
}

.mega-menu a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
}

.mega-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.mega-menu .sub-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mega-menu .sub-menu li {
  flex-basis: 30%;
  padding: 10px 15px;
}

.mega-menu .sub-menu a {
  display: block;
  padding: 5px 0;
  color: #666;
  text-decoration: none;
}

In the above code, we have set the list style to none, and removed any margins and padding on the unordered list. We have set the display to flex to align the list items horizontally. The list items have been given a relative position, and we have used the flex property to make each item fill an equal amount of space. The anchor tags have been given a display block, and some padding to make them clickable and easy to select.

We have also set the styles for the sub-menu container. The position has been set to absolute, and the display has been set to none to hide it by default. When a user hovers over a category, the display property will be changed to block to show the sub-menu. We have set a z-index to ensure that the sub-menu appears on top of other elements on the page, and added a box-shadow for a subtle visual effect.

For the sub-menu list items, we have used the flex-basis property to make them fill an equal amount of space. We have also given them some padding and removed any text-decoration on the anchor tags.

Step 3: Adding JavaScript for Responsiveness

To make the mega menu responsive, we'll use JavaScript to add and remove classes from the HTML elements. When the screen size is smaller, we'll change the layout of the menu and display the sub-menu when the user clicks on the category instead of hovering over it.

Here is an example JavaScript code for responsiveness:

const menuBtn = document.querySelector(".menu-btn");
const menu = document.querySelector(".mega-menu ul");

menuBtn.addEventListener("click", () => {
  menu.classList.toggle("show");
});

const menuItems = document.querySelectorAll(".mega-menu li");

menuItems.forEach((menuItem) => {
const subMenu = menuItem.querySelector(".sub-menu");

  if (subMenu) {
    menuItem.addEventListener("click", (e) => {
      e.preventDefault();
      subMenu.classList.toggle("show");
    });
    menuItem.addEventListener("mouseenter", () => {
      if (window.innerWidth > 768) {
        subMenu.classList.add("show");
      }
    });

    menuItem.addEventListener("mouseleave", () => {
      if (window.innerWidth > 768) {
        subMenu.classList.remove("show");
      }
    });
  }
});

In the above code, we have selected the menu button and the menu container using the querySelector() method. We have added an event listener to the menu button to toggle a class on the menu container when it is clicked.

We have also selected all the menu items and added event listeners to each item. When a user clicks on a category, we prevent the default link behavior and toggle a class on the sub-menu container to show it. When a user hovers over a category, we check if the screen size is larger than 768px, and if it is, we add a class to show the sub-menu. If the user leaves the category, we remove the class to hide the sub-menu. This way, the menu will work differently depending on the size of the screen.

Step 4: Testing and Troubleshooting

Once you have added the HTML, CSS, and JavaScript code, you can test your mega menu by previewing it in your web browser. Check to see if the menu looks and behaves as expected, and test it on different screen sizes to ensure that it is responsive.

If you encounter any issues, you can use the browser's developer tools to inspect the elements and check for errors in the code. You can also consult online resources and forums to find solutions to common issues.

Conclusion

In this tutorial, we have learned how to create a responsive mega menu using HTML, CSS, and JavaScript. By following these steps, you can create a professional-looking menu that is easy to navigate and adapts to different screen sizes. With some creativity and experimentation, you can customize your menu to match the design of your website and improve the user experience for your visitors.