How to Make Responsive Menus in HTML, CSS and JavaScript
Published: 2022-11-02 06:23:52

Hey Guys, hope you all of fine, today I'm going to teach with you How to Make Responsive Menus in HTML, CSS and JavaScript.

So, let's look at that in the video tutorial. 

{% embed https://www.youtube.com/watch?v=JGzeKR3AIeo
 %}

First of All, you need to write the HTML structure to display the links and text. I've shared below codes, inside the code have a font awesome cdn file and also have a linked CSS and also JavaScript files.


    <header>
      <a href="#" class="logo">OnlineITtuts</a>
      <nav class="navbar">
        <div class="btn">
          <i class="fas fa-times close-btn"></i>
        </div>
        <a href="#" class="active">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Course</a>
        <a href="#">Contact</a>
      </nav>
      <div class="btn">
        <i class="fas fa-bars menu-btn"></i>
      </div>
    </header>
    <section>
      <h2>Responsive Navbar</h2>
    </section>

**Once you done that, then you need to use css to style it.
**

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  background: url("img.jpg") no-repeat center center/cover;
  height: 100vh;
  overflow: hidden;
}

header {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 50px;
  background: #21293a;
  color: #fff;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

header .logo {
  font-size: 30px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 2px;
  color: #fff;
}

header .navbar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .navbar a {
  font-size: 1.7rem;
  font-weight: 500;
  text-decoration: none;
  margin: 0 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 05px;
  color: #fff;
  letter-spacing: 1px;
}

header .navbar a:hover,
.active {
  background: #2c3e50;
  transition: 0.6s;
}

header .btn {
  font-size: 25px;
  cursor: pointer;
  display: none;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

section h2 {
  color: #fff;
  font-size: 10rem;
  letter-spacing: 0.9rem;
  text-align: center;
}

Once you done that, then you will able to see your navigation menus are successfully display on the web.

But, we need to make a responsive, so, we need to use media query to make a responsive.

`@media (max-width: 991px) {
  html {
    font-size: 55%;
  }
  header {
    padding: 1rem 2rem;
  }
}

@media (max-width: 768px) {
  header .btn {
    display: block;
  }

  header .navbar {
    position: fixed;
    flex-direction: column;
    min-width: 300px;
    height: 100vh;
    background: #2c3e50;
    top: 0;
    right: -100%;
    transition: all 0.9s;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 10rem;
  }

  header .navbar.active2 {
    right: 0;
    transition: 0.9s;
  }

  header .navbar .close-btn {
    position: absolute;
    top: 0;
    left: 0;
    margin: 25px;
  }

  header .navbar a {
    display: block;
    font-size: 1.9rem;
    margin: 15px;
    padding: 0.5rem 15px;
  }

  header .navbar a:hover {
    background: #21293a;
    color: #fff;
  }

  header .logo {
    font-size: 25px;
    font-weight: 500;
  }

  section h2 {
    color: #fff;
    font-size: 5rem;
    padding: 2rem;
    letter-spacing: 0.9rem;
    text-align: center;
  }
}
`
Then you need to use JavaScript to display and hide the menus. So, I'm going to share with you on below JS code.

`let menus = document.querySelector(".navbar");
let menus_btn = document.querySelector(".menu-btn");
let close_btn = document.querySelector(".close-btn");

menus_btn.addEventListener("click", function () {
  menus.classList.add("active2");
});

close_btn.addEventListener("click", function () {
  menus.classList.remove("active2");
});
`

That's for creating a responsive menus. hope this tutorial is helpful and beneficial for you.