Responsive Single-level Dropdown Menu With JavaScript

Category: Javascript , Menu & Navigation | April 15, 2021
Views Total:9,960 views
Official Page:Go to website
Last Update:April 15, 2021


Responsive Single-level Dropdown Menu With JavaScript


Yet another responsive single-level dropdown navigation that works perfectly on both desktop and mobile.

In mobile view, you will see the dropdown menu is collapsed into a hamburger button, which enables the visitor to toggle the navigation just like an off-canvas menu.

How to use it:

1. The dropdown menu requires the ionicons for the expand/collapse/hamburger icons.

<link rel="stylesheet" type="text/css" href="" />

2. Code the HTML for the dropdown menu.

<header class="header">
  <div class="container">
    <section class="wrapper">
      <h1><a href="#" class="brand">Brand</a></h1>
      <button type="button" class="opened-menu">
      <div class="overlay"></div>
      <nav class="navbar">
        <button type="button" class="closed-menu">
        <img src="./asset/closed.svg" class="closed-icon" alt="closed">
        <ul class="menu">
          <li class="menu-item"><a href="#">Home</a></li>
          <li class="menu-item"><a href="#">About</a></li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Services<i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Web Design</a></li>
              <li class="menu-item"><a href="#">Web Development</a></li>
              <li class="menu-item"><a href="#">Brand Marketing</a></li>
              <li class="menu-item"><a href="#">SEO and Optimizing</a></li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Planning <i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Basic Plan</a></li>
              <li class="menu-item"><a href="#">Standard Plan</a></li>
              <li class="menu-item"><a href="#">Premium Plan</a></li>
              <li class="menu-item"><a href="#">Professional Plan</a></li>
          <li class="menu-item menu-item-has-children">
            <a href="#" data-toggle="sub-menu">Article <i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Article One</a></li>
              <li class="menu-item"><a href="#">Article Two</a></li>
              <li class="menu-item"><a href="#">Article Three</a></li>
          <li class="menu-item"><a href="#">Contact</a></li>

3. Load the main JavaScript and stylesheet in the document. That’s it.

<link rel="stylesheet" type="text/css" href="./css/style.min.css" />
<script src="./js/script.js" defer></script>

You Might Be Interested In:

Leave a Reply