Responsive Drop Down Menu Bar with Sub Menu

Responsive Drop Down Menu Bar with Sub Menu in HTML, CSS and JavaScript

Byjvcodes

Improving website navigation is very important in order to provide visitors with the most optimal experience possible. Another free website menu design is the Responsive Drop Down Menu Bar with Sub Menu coded in HTML, CSS, and JavaScript.

GitHub Source: Responsive Drop Down Menu Bar with Sub Menu

A responsive menu provides users on a small screen on a laptop, PC, tablet or mobile easy navigation within the site. With such a drop-down menu bar, you can create a submenus navigation that can improve the user experience.

In this article, I will give you some free source code for Responsive Drop Down Menu Bar to use in your project.

Also Check: Simple Responsive Navigation Menu Bar

Features

Here are the top features of the Responsive Drop Down Menu Bar:

  • Clean Code: Easy to understand as it is well commented, suitable for beginners.
  • Compatible with all modern CMS: Fully compatible with WordPress, Joomla, and any other HTML-based interface.
  • Search Bar: In this menu bar, search feature also included.
  • Fully Responsive: Responsive layout that is compatible with desktop, tablet and mobile.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Menu

Here is a simple step-by-step guide to create a Responsive Drop Down Menu Bar with Sub Menu:

  • Create Project Folder: Begin by creating a folder in which all the files you will be using shall be located.
  • Create index.html: This file will hold the structure of your responsive menu.
  • Create style.css: This stylesheet will be responsible for the design of the menu, as well as its responsive properties.
  • Create script.js: The drop down and submenu will be made interactive by this JavaScript file.
  • Copy & paste: Below is the code that you can use them in your project by copy and paste.

HTML

Here is the HTML code for your index.html file:

GitHub Source: Responsive Drop Down Menu Bar

<!DOCTYPE html>
<!-- Created By JV Codes - www.jvcodes.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
   <title> Drop Down Menu Bar | JV Codes </title>
    <link rel="stylesheet" href="style.css">
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="navbar">
      <i class='bx bx-menu'></i>
      <div class="logo"><a href="#">Pets Pro Guide</a></div>
      <div class="nav-links">
        <div class="sidebar-logo">
          <span class="logo-name">Pets Pro Guide</span>
          <i class='bx bx-x' ></i>
        </div>
        <ul class="links">
          <li><a href="#">HOME</a></li>
          <li>
            <a href="#">PETS</a>
            <i class='bx bxs-chevron-down htmlcss-arrow arrow  '></i>
            <ul class="htmlCss-sub-menu sub-menu">
              <li><a href="#">Dogs</a></li>
              <li><a href="#">Cats</a></li>
              <li><a href="#">Horses</a></li>
              <li class="more">
                <span><a href="#">Birds</a>
                <i class='bx bxs-chevron-right arrow more-arrow'></i>
              </span>
                <ul class="more-sub-menu sub-menu">
                  <li><a href="#">Parrot</a></li>
                  <li><a href="#">Cardinal</a></li>
                  <li><a href="#">Eagle</a></li>
                  <li><a href="#">Kingfisher</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">SMALL PETTS</a>
            <i class='bx bxs-chevron-down js-arrow arrow '></i>
            <ul class="js-sub-menu sub-menu">
              <li><a href="#">Hamster</a></li>
              <li><a href="#">Rabbit</a></li>
              <li><a href="#">Owl</a></li>
              <li><a href="#">Tortoise</a></li>
            </ul>
          </li>
          <li><a href="#">REPTILES</a></li>
          <li><a href="#">PET NEWS</a></li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
      <div class="search-box">
        <i class='bx bx-search'></i>
        <div class="input-box">
          <input type="text" placeholder="jvcodes.com...">
        </div>
      </div>
    </div>
  </nav>
  <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the menu:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

/* Global Reset and Default Font */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  min-height: 100vh;
}

/* Navigation Bar Styles */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #855000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
}

/* Navbar Container */
nav .navbar {
  height: 100%;
  max-width: 1250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0 50px;
}

/* Logo Styling */
.navbar .logo a {
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* Navigation Links Styling */
nav .navbar .nav-links {
  height: 100%;
  line-height: 70px;
}

/* Links Container */
nav .navbar .links {
  display: flex;
}

/* Individual Links */
nav .navbar .links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}

/* Links Anchor Tag Styling */
nav .navbar .links li a {
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* Submenu Arrow Hover Effect */
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow {
  transform: rotate(180deg);
}

/* Arrow Icon Styling */
nav .navbar .links li .arrow {
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease;
}

/* Submenu Styling */
nav .navbar .links li .sub-menu {
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #855000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}

/* Show Submenu on Hover */
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu {
  display: block;
}

/* Submenu List Item Styling */
.navbar .links li .sub-menu li {
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Submenu Anchor Styling */
.navbar .links li .sub-menu a {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}

/* More Submenu Arrow */
.navbar .links li .sub-menu .more-arrow {
  line-height: 40px;
}

/* More Submenu Container */
.navbar .links li .htmlCss-more-sub-menu {
  /* Extra space for future styling */
}

/* More Submenu Display */
.navbar .links li .sub-menu .more-sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}

/* Show More Submenu on Hover */
.links li .sub-menu .more:hover .more-sub-menu {
  display: block;
}

/* Search Box Styling */
.navbar .search-box {
  position: relative;
  height: 40px;
  width: 40px;
}

/* Search Icon */
.navbar .search-box i {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Search Input Box Styling */
.navbar .search-box .input-box {
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #855000;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}

/* Show Search Input on Click */
.navbar.showInput .search-box .input-box {
  top: 65px;
  opacity: 1;
  pointer-events: auto;
}

/* Arrow Box Above Search */
.search-box .input-box::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #855000;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}

/* Search Input Field */
.search-box .input-box input {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}

/* Sidebar Menu */
.navbar .nav-links .sidebar-logo {
  display: none;
}

/* Mobile Menu Icon */
.navbar .bx-menu {
  display: none;
}

/* Media Queries */

/* Tablet View (Max-width: 920px) */
@media (max-width: 920px) {
  nav .navbar {
    max-width: 100%;
    padding: 0 25px;
  }

  nav .navbar .logo a {
    font-size: 27px;
  }

  nav .navbar .links li {
    padding: 0 10px;
    white-space: nowrap;
  }

  nav .navbar .links li a {
    font-size: 15px;
  }
}

/* Mobile View (Max-width: 800px) */
@media (max-width: 800px) {
  /* Show Mobile Menu Icon */
  .navbar .bx-menu {
    display: block;
  }

  /* Mobile Navigation Links */
  nav .navbar .nav-links {
    position: fixed;
    top: 0;
    left: -100%;
    max-width: 270px;
    width: 100%;
    background: #855000;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }

  /* Sidebar Logo */
  .navbar .nav-links .sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sidebar-logo .logo-name {
    font-size: 25px;
    color: #fff;
  }

  .sidebar-logo i,
  .navbar .bx-menu {
    font-size: 25px;
    color: #fff;
  }

  /* Display Links in Block */
  nav .navbar .links {
    display: block;
    margin-top: 20px;
  }

  /* Submenu Styling for Mobile */
  nav .navbar .links li .sub-menu {
    position: relative;
    top: 0;
    box-shadow: none;
    display: none;
  }

  .navbar .links li .sub-menu .more-sub-menu {
    position: relative;
    left: 0;
  }

  /* Disable Arrow Rotation on Mobile */
  .links li:hover .htmlcss-arrow,
  .links li:hover .js-arrow {
    transform: rotate(0deg);
  }

  .navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu {
    display: block;
  }

  /* Arrow Rotation for Open Menus */
  .navbar .nav-links.show1 .links .htmlcss-arrow,
  .navbar .nav-links.show3 .links .js-arrow {
    transform: rotate(180deg);
  }

  .navbar .nav-links.show2 .links .more-arrow {
    transform: rotate(90deg);
  }
}

/* Small Mobile View (Max-width: 370px) */
@media (max-width: 370px) {
  nav .navbar .nav-links {
    max-width: 100%;
  }
}

JavaScript

Here is the complete code for script.js file to function the menu:

// Search box open/close toggle functionality
let navbar = document.querySelector(".navbar"); 
let searchBox = document.querySelector(".search-box .bx-search");

// Event listener for search box icon click
searchBox.addEventListener("click", () => {
  // Toggle the 'showInput' class on the navbar to show/hide the input box
  navbar.classList.toggle("showInput");

  // Change the icon based on whether the input is shown or hidden
  if (navbar.classList.contains("showInput")) {
    searchBox.classList.replace("bx-search", "bx-x"); // Show 'close' (x) icon
  } else {
    searchBox.classList.replace("bx-x", "bx-search"); // Show 'search' icon
  }
});

// Sidebar open/close functionality
let navLinks = document.querySelector(".nav-links"); 
let menuOpenBtn = document.querySelector(".navbar .bx-menu"); // Menu open button
let menuCloseBtn = document.querySelector(".nav-links .bx-x"); // Menu close button

// Event listener for opening the sidebar menu
menuOpenBtn.onclick = function() {
  navLinks.style.left = "0"; // Slide the sidebar into view
}

// Event listener for closing the sidebar menu
menuCloseBtn.onclick = function() {
  navLinks.style.left = "-100%"; // Slide the sidebar out of view
}

// Sidebar submenu open/close functionality

// Event listener for HTML/CSS submenu toggle
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
  navLinks.classList.toggle("show1"); // Toggle class to show/hide HTML/CSS submenu
}

// Event listener for "More" submenu toggle
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
  navLinks.classList.toggle("show2"); // Toggle class to show/hide the "More" submenu
}

// Event listener for JavaScript submenu toggle
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
  navLinks.classList.toggle("show3"); // Toggle class to show/hide JavaScript submenu
}

Download Source Code

Here’s the button where you can download the free source codes for the Responsive Drop Down Menu Bar with Sub Menu. Such download contains JavaScripts, HTML, and CSS files etc. It is an open-source code that is available without copyright, and it can be used in personal or commercial projects.

Download Source Code

Conclusion

Responsive Drop Down Menu Bar with Sub Menu in HTML, CSS, and JavaScript is a versatile and intuitive for any website. You can use it on all your websites and link back to JV Source Codes to contribute to the original owner.

If you have any question or any challenge when completing these activities, you are welcome to leave a comment and I shall come in and assist. Do not forget to subscribe to my channel (JV Codes) to get more content. Happy coding!

Similar Posts

Responsive Sidebar Menu With Dark and Light Mode
| | |

Responsive Sidebar Menu With Dark and Light Mode Using HTML, CSS and JavaScript

Responsive Sidebar Menu With Dark and Light Mode Using HTML, CSS & JavaScript allows you to make your website more interactive and beautiful. This menu concerns users’ preferences of dark and light viewing modes as well as convenience in navigation regardless of the time of the day. The code written for this guide is completely…

Responsive Mega Menu in HTML, CSS and JavaScript
| | |

Responsive Mega Menu in HTML, CSS and JavaScript

Responsive Mega Menu in HTML, CSS, JavaScript is the major part of modern web designs. It is useful in the arrangement of large website navigation by breaking it in several rows and ensuring it adapts to desktop, tablets, and mobile screen sizes. In this guide, I’ll show you how to create a responsive mega menu…

Google Drive Direct Download Link Generator
| |

Google Drive Direct Download Link Generator Tool in HTML, CSS, JavaScript

Do you want to make tool for direct downloading files from Google Drive with less time and effort? You will be glad to know that the Google Drive Direct Download Link Generator Tool in HTML, CSS, and JavaScript is ready for you. Here I am going to provide you free source codes of your own…

Age Calculator Source Code
| |

Age Calculator Using HTML, CSS and JavaScript (Free Source Code)

Determining an exact age reliably is a valuable resource in site development, especially in services that differentiate between certain ages. I’m happy to give you a free source code for Age Calculator Using HTML, CSS, and JavaScript; it’s more efficient to use, and a simple yet effective way to calculate the age instantly. This code…

Image Comparison Slider
| | |

Image Comparison Slider in HTML, CSS and JavaScript

Do you want to implement a feature on your website that will enable someone to compare two images simultaneously? Look no further! So in this article, I will share with you Free Source Codes of an Image Comparison Slider in HTML, CSS, JavaScript. Here, I found that this slider is good for using the ‘before…

Leave a Reply

Your email address will not be published. Required fields are marked *