Responsive Dropdown Navigation Bar

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="style.css">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css?family=Psoppins&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>

  <body>
    <nav>
      <ul class="menu">
        <li class="logo"><a href="#">Atech Seva</a></li>
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About</a></li>
        <li class="item has-submenu">
          <a tabindex="0">Services</a>
          <ul class="submenu">
            <li class="subitem"><a href="#">Design</a></li>
            <li class="subitem"><a href="#">Development</a></li>
            <li class="subitem"><a href="#">SEO</a></li>
            <li class="subitem"><a href="#">Copywriting</a></li>
          </ul>
        </li>
        <li class="item has-submenu">
          <a tabindex="0">Plans</a>
          <ul class="submenu">
            <li class="subitem"><a href="#">Freelancer</a></li>
            <li class="subitem"><a href="#">Startup</a></li>
            <li class="subitem"><a href="#">Enterprise</a></li>
          </ul>
        </li>
        <li class="item"><a href="#">Blog</a></li>
        <li class="item"><a href="#">Contact</a>
        </li>
        <li class="item button "><a href="" class="p-0"><button class="reg">Sign up</button></a></li>
        <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
      </ul>
    </nav>
    <script src="main.js"></script>
  </body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

nav {
  background: rgb(255, 255, 255);
  padding: 0 15px;
  border-bottom: 1px solid gainsboro;
  box-shadow: 0px 8px 26px -12px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 8px 26px -12px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 8px 26px -12px rgba(0, 0, 0, 0.75);
}

a {
  color: rgb(37, 37, 37);
  text-decoration: none;
}

.reg {

  color: white;
  background-color: rgba(104, 85, 224, 1);
}

.p-0 {
  padding: 0 !important;
}

button {
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  font-weight: 600;
  margin: 0;
  width: 100px;
  padding: 10px 0;
  box-shadow: 0 0 20px rgb(104 85 224 / 20%);
  transition: 0.4s;
}
button:hover {
  color: white;
  box-shadow: 0 0 20px rgba(104, 85, 224, 0.6);
  background-color: rgba(104, 85, 224, 1);
}
.menu,
.submenu {
  list-style-type: none;
}

.logo {
  font-size: 20px;
  padding: 7.5px 10px 7.5px 0;
}

.item {
  padding: 10px;
  cursor: pointer;
  user-select: none;
}

.item.button {
  padding: 9px 5px;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.menu li a {
  display: block;
  padding: 15px 5px;
}

.menu li.subitem a {
  padding: 15px;
  color: rgb(0 0 0);
  font-size: 13px;
}

.toggle {
  order: 1;
  font-size: 20px;
}

.item.button {
  order: 2;
}
.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}

.item a:hover {
  color: black;
}

/* Submenu up from mobile screens */
.submenu {
  display: none;
}

.submenu-active .submenu {
  display: block;
}

.submenu-active a:hover {
  color: white;
}

.submenu-active a {
  color: white;
}

.has-submenu i {
  font-size: 12px;
}

.has-submenu>a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: rgb(37, 37, 37);
  padding-left: 5px;
}

.submenu-active>a::after {
  font-family: "Font Awesome 5 Free";
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  content: "\f078";
  color: rgb(255, 255, 255);
  padding-left: 5px;
}

.subitem a {
  padding: 10px 15px;
}

.submenu-active {
  background-color: #111;
  border-radius: 3px;
}
.subitem {
  border-bottom: 1px solid;
}

@media only screen and (max-width: 700px) {
  .menu li.subitem a {
    color: white;
  }
}

/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
  .item.button {
    width: auto;
    order: 1;
    display: block;
  }
  .toggle {
    flex: 1;
    text-align: right;
    order: 2;
  }
}

/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: center;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #f1f1f1;
    border: 1px solid #afafaf;
    width: 200px;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    color: rgb(255, 255, 255);
    border-radius: 0;
  }
}

main.js

const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".item");

/* Toggle mobile menu */
function toggleMenu() {
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
  } else {
    menu.classList.add("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
  }
}

/* Activate Submenu */
function toggleItem() {
  if (this.classList.contains("submenu-active")) {
    this.classList.remove("submenu-active");
  } else if (menu.querySelector(".submenu-active")) {
    menu.querySelector(".submenu-active").classList.remove("submenu-active");
    this.classList.add("submenu-active");
  } else {
    this.classList.add("submenu-active");
  }
}

/* Close Submenu From Anywhere */
function closeSubmenu(e) {
  if (menu.querySelector(".submenu-active")) {
    let isClickInside = menu
      .querySelector(".submenu-active")
      .contains(e.target);

    if (!isClickInside && menu.querySelector(".submenu-active")) {
      menu.querySelector(".submenu-active").classList.remove("submenu-active");
    }
  }
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
  if (item.querySelector(".submenu")) {
    item.addEventListener("click", toggleItem, false);
  }
  item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);

Responsive Dropdown Menu Using HTML, CSS & JAVASCRIPT

index.html

style.css

main.js

Let's start a project together