website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

responsive-dropdown-navigation-menu

Responsive Dropdown Menu Using HTML, CSS & JAVASCRIPT

  • 154
  • 16-Jan-2023
  • Codepen

  • Details

    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);

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat