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.

#html #css #webdev #javascript

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

Top comments (1)

Collapse
 
w3tsa profile image
Coding Jitsu •

Great tips!

Read next

samarpankc profile image

Tim Berners-Lee : The Man Behind the Web

Samarpan KC -

sami_rajpoot_01d4c1db89bb profile image

The Role of a WordPress Developer: Bridging Creativity and Functionality

Sami rajpoot -

keploy profile image

SSL Certificate Problem: Unable to Get Local Issuer Certificate – Causes and Solutions

keploy -

wafa_bergaoui profile image

Optimizing React Components with useMemo and useCallback

Wafa Bergaoui -