Building a Responsive Navigation Menu with HTML, CSS, and JavaScript

 Building a Responsive Navigation Menu with HTML, CSS, and JavaScript

Overview: In this blog post, we'll show you how to build a responsive navigation menu using HTML, CSS, and JavaScript. We'll cover topics such as using media queries to make our menu responsive, adding a hamburger menu icon, and implementing the functionality to open and close the menu with JavaScript.

Code Snippet:

html

<nav>

  <div class="hamburger-menu">

    <span class="line"></span>

    <span class="line"></span>

    <span class="line"></span>

  </div>

  <ul class="menu">

    <li><a href="#">Home</a></li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Contact Us</a></li>

  </ul>

</nav>

css

Copy code

/* Make the menu responsive with media queries */

@media screen and (max-width: 768px) {

  .menu {

    display: none;

  }

  .menu.active {

    display: block;

  }

}

/* Style the hamburger menu icon */

.hamburger-menu {

  display: none;

}

.hamburger-menu.active .line:nth-of-type(1) {

  transform: rotate(45deg) translate(5px, 5px);

}

.hamburger-menu.active .line:nth-of-type(2) {

  opacity: 0;

}

.hamburger-menu.active .line:nth-of-type(3) {

  transform: rotate(-45deg) translate(5px, -5px);

}

/* Add JavaScript functionality to open and close the menu */

const hamburgerMenu = document.querySelector('.hamburger-menu');

const menu = document.querySelector('.menu');

hamburgerMenu.addEventListener('click', () => {

  hamburgerMenu.classList.toggle('active');

  menu.classList.toggle('active');

});