DEV Community

Cover image for How to build a responsive navigation menu.
Coding Jitsu
Coding Jitsu

Posted on • Updated on

How to build a responsive navigation menu.

checkout my YT channel for more videos.

Here is all the code used in the video.

Index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="stylesheet.css" />
    <title>Navigation | Web Component</title>
  </head>
  <body>
    <header>
      <nav>
        <h2 class="logo">BRAND</h2>
        <div class="burger">
          <div class="top-bar"></div>
          <div class="middle-bar"></div>
          <div class="bottom-bar"></div>
        </div>
        <ul>
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Services</a>
            <i class="fas fa-chevron-down"></i>
            <ul class="sub-menu">
              <li><a href="#">React</a></li>
              <li><a href="#">Vue</a></li>
              <li><a href="#">Angular</a></li>
              <li><a href="#">Ember</a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="cta-btn"><a href="#">Download</a></li>
        </ul>
      </nav>
    </header>
    <script src="app.js" defer></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

stylesheet.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: rgb(27, 23, 37);
  --secondary-color: rgb(144, 136, 156);
  --bg-color: rgb(164, 153, 179);
  --text-color: rgb(241, 235, 235);
}

body {
  background: var(--bg-color);
  color: var(--primary-color);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  font-size: 1.2rem;
  color: var(--primary-color);
  letter-spacing: 0.3px;
}

a:hover {
  color: var(--text-color);
}

header {
  width: 100%;
  height: 100%;
}

/* Desktop Nav */

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 20px auto;
  position: sticky;
  top: 20px;
}

header nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
  list-style: none;
  position: relative;
}

header nav ul .sub-menu {
  position: absolute;
  top: 40px;
  left: 50px;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  background: var(--secondary-color);
  border-radius: 10px;
  display: none;
}

header nav ul .sub-menu:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--secondary-color);
  transform: rotate(45deg);
}

header nav ul .sub-menu li {
  padding: 10px;
}

.fa-chevron-down {
  cursor: pointer;
}

.cta-btn a {
  padding: 8px 20px;
  border-radius: 10px;
  color: var(--primary-color);
  background: var(--text-color);
}

.cta-btn a:hover {
  color: var(--text-color);
  background: var(--primary-color);
}

/* Mobile Navigation */

.burger {
  cursor: pointer;
  display: none;
}

.burger div {
  margin: 4px;
}

.burger .top-bar {
  background: var(--primary-color);
  width: 40px;
  height: 3px;
  border-radius: 5px;
}
.burger .middle-bar {
  background: var(--primary-color);
  width: 40px;
  height: 3px;
  border-radius: 5px;
}
.burger .bottom-bar {
  background: var(--primary-color);
  width: 40px;
  height: 3px;
  border-radius: 5px;
}

@media (max-width: 850px) {
  .burger {
    display: block;
  }
  header nav ul:not(.sub-menu) {
    position: absolute;
    top: 50px;
    right: 0px;
    flex-direction: column;
    width: 200px;
    height: 50vh;
    background: var(--secondary-color);
  }

  header nav ul {
    transition: transform 0.3s ease-in-out;
    border-radius: 10px;
    transform: translateX(150%);
  }

  header nav ul .sub-menu {
    position: absolute;
    top: 20%;
    left: -270px;
    background: rgb(118, 112, 128);
  }

  header nav ul .sub-menu:before {
    left: 115px;
    top: 20px;
    background: rgb(118, 112, 128);
  }
  .cta-btn {
    margin-bottom: 20px;
  }
}

.open {
  transform: translateX(0%);
}

Enter fullscreen mode Exit fullscreen mode

app.js:

const openSubMenu = document.querySelector(".fa-chevron-down");
const subMenu = document.querySelector(".sub-menu");

openSubMenu.addEventListener("click", function () {
  if (subMenu.style.display !== "block") {
    subMenu.style.display = "block";
  } else {
    subMenu.style.display = "none";
  }
});

// mobile nav

const burger = document.querySelector(".burger");
const menu = document.querySelector("header nav ul");

burger.addEventListener("click", function () {
  menu.classList.toggle("open");
});

Enter fullscreen mode Exit fullscreen mode

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

2 tips:

  1. You should use SVGs for stuff like the burger menu, or other icons.
  2. Instead of setting the style property of the subMenu manually, you could just use classList.toggle like you did with menu.

Cheers!

Collapse
w3tsa profile image
Coding Jitsu Author

Great tips!