JavaScript Code Drop Down Menu

Posted inVanilla JavaScript
JavaScript Code Drop Down Menu
Project: Custom Dropdown/JS/Javascript Dropdown
Author: Kenley Jean
Edit Online: View on CodePen
License: MIT
 Live Preview
Download (File not found!)

This JavaScript code snippet helps you to create drop down menu. It creates a JavaScript function to toggle dropdown menus based on user interactions.

  1. The function selects all the elements with the class “dropdown-toggle” from the HTML document.
  2. It checks if each dropdown is a “click-dropdown” or “hover-dropdown” type.
  3. When a “click-dropdown” is clicked, it opens or closes the dropdown menu by toggling classes, and it also listens for clicks outside the dropdown menu to close it.
  4. When a “hover-dropdown” is hovered over, it opens the dropdown menu and closes all other dropdown menus. It also listens for mouse leave events from the dropdown menu to close it.
  5. There is also a “closeDropdown” function that removes the “dropdown-open” and “dropdown-active” classes from all the dropdown menus, and it is used to close any opened dropdown menu.

How to Create JavaScript Code Drop Down Menu

Create the HTML structure as follows to create drop down menu:

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">

<h1>Dropdown with Vanilla JS</h1>
<h3>Creator: Parth Chaudhary(<a href="https://devparth.com/">www.devparth.com</a>)</h3>
<!-- Dropdowns -->
<h1>Clickable Dropdown</h1>
    <div class="row">
        <div class="col">
          <!-- Default Design -->
          <div class="dropdown-container">
            <div class="dropdown-toggle click-dropdown">
              DropDown Menu
            </div>
            <div class="dropdown-menu">
              <ul>
                <li><a href="#">DropDown Menu Item 1</a></li>
                <li><a href="#">DropDown Menu Item 2</a></li>
                <li><a href="#">DropDown Menu Item 3</a></li>
                <li><a href="#">DropDown Menu Item 4</a></li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="col">
          <!-- Bordered Dropdown -->
          <div class="dropdown-container dropdown-bordered">
            <div class="dropdown-toggle click-dropdown">
              DropDown Menu
            </div>
            <div class="dropdown-menu">
              <ul>
                <li><a href="#">DropDown Menu Item 1</a></li>
                <li><a href="#">DropDown Menu Item 2</a></li>
                <li><a href="#">DropDown Menu Item 3</a></li>
                <li><a href="#">DropDown Menu Item 4</a></li>
              </ul>
            </div>
          </div>
        </div>
        
        <div class="col">
          <!-- Bordered Gradient -->
          <div class="dropdown-container dropdown-gradient">
            <div class="dropdown-toggle click-dropdown">
              DropDown Menu
            </div>
            <div class="dropdown-menu">
              <ul>
                <li><a href="#">DropDown Menu Item 1</a></li>
                <li><a href="#">DropDown Menu Item 2</a></li>
                <li><a href="#">DropDown Menu Item 3</a></li>
                <li><a href="#">DropDown Menu Item 4</a></li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col">
          <!-- Bordered Solid -->
          <div class="dropdown-container dropdown-solid">
            <div class="dropdown-toggle click-dropdown">
              DropDown Menu
            </div>
            <div class="dropdown-menu">
              <ul>
                <li><a href="#">DropDown Menu Item 1</a></li>
                <li><a href="#">DropDown Menu Item 2</a></li>
                <li><a href="#">DropDown Menu Item 3</a></li>
                <li><a href="#">DropDown Menu Item 4</a></li>
              </ul>
            </div>
          </div>
        </div>
    </div>

    <h1>Hoverable Dropdown</h1>
    <div class="row">
      <div class="col">
        <!-- Default Design -->
        <div class="dropdown-container">
          <div class="dropdown-toggle hover-dropdown">
            DropDown Menu
          </div>
          <div class="dropdown-menu">
            <ul>
              <li><a href="#">DropDown Menu Item 1</a></li>
              <li><a href="#">DropDown Menu Item 2</a></li>
              <li><a href="#">DropDown Menu Item 3</a></li>
              <li><a href="#">DropDown Menu Item 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="col">
        <!-- Bordered Dropdown -->
        <div class="dropdown-container dropdown-bordered">
          <div class="dropdown-toggle hover-dropdown">
            DropDown Menu
          </div>
          <div class="dropdown-menu">
            <ul>
              <li><a href="#">DropDown Menu Item 1</a></li>
              <li><a href="#">DropDown Menu Item 2</a></li>
              <li><a href="#">DropDown Menu Item 3</a></li>
              <li><a href="#">DropDown Menu Item 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      
      <div class="col">
        <!-- Bordered Gradient -->
        <div class="dropdown-container dropdown-gradient">
          <div class="dropdown-toggle hover-dropdown">
            DropDown Menu
          </div>
          <div class="dropdown-menu">
            <ul>
              <li><a href="#">DropDown Menu Item 1</a></li>
              <li><a href="#">DropDown Menu Item 2</a></li>
              <li><a href="#">DropDown Menu Item 3</a></li>
              <li><a href="#">DropDown Menu Item 4</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col">
        <!-- Bordered Solid -->
        <div class="dropdown-container dropdown-solid">
          <div class="dropdown-toggle hover-dropdown">
            DropDown Menu
          </div>
          <div class="dropdown-menu">
            <ul>
              <li><a href="#">DropDown Menu Item 1</a></li>
              <li><a href="#">DropDown Menu Item 2</a></li>
              <li><a href="#">DropDown Menu Item 3</a></li>
              <li><a href="#">DropDown Menu Item 4</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<h2>Parth Chaudhary(<a href="https://devparth.com/">www.devparth.com</a>)</h2>

Style the drop down menu using the following CSS styles:

* {
  box-sizing: border-box;
}

body {
  padding: 30px;
  background: #f2f2f2;
  font-family: "Montserrat", sans-serif;
}
.cd__main{
display: block !important;
}
h1 {
  text-align: center;
}

h3 {
  text-align: center;
  margin-bottom: 50px;
}

h2 {
  text-align: center;
  margin-top: 60px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  margin-top: 30px;
  margin-bottom: 80px;
}
.row .col {
  max-width: 100%;
  width: 100%;
  padding: 0 15px;
  flex: 0 0 100%;
}
.row .col .dropdown-container {
  margin: 0 auto;
  margin-bottom: 20px;
}
@media (min-width: 767px) {
  .row .col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .row .col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Dropdown menu css */
.dropdown-container {
  position: relative;
  max-width: 240px;
}
.dropdown-container .dropdown-toggle {
  color: #000000;
  background-color: #ffffff;
  font-size: 17px;
  padding: 18px 20px;
  box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: all ease-in-out 0.3s;
}
.dropdown-container .dropdown-toggle label {
  cursor: pointer;
  width: 100%;
}
.dropdown-container .dropdown-toggle:hover, .dropdown-container .dropdown-toggle:active, .dropdown-container .dropdown-toggle:focus {
  background-color: #0979ce;
  color: #ffffff;
}
.dropdown-container .dropdown-menu {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.5);
  margin-top: 17px;
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  background-color: #ffffff;
  z-index: 10;
}
.dropdown-container .dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  z-index: 10;
}
.dropdown-container .dropdown-menu a {
  text-decoration: none;
  display: block;
  color: #000000;
  font-size: 15px;
  padding: 16px 20px;
  font-weight: 600;
  box-shadow: 0px 0px 4px -2px rgba(0, 0, 0, 0.5);
  transition: all ease-in-out 0.3s;
}
.dropdown-container .dropdown-menu a:hover, .dropdown-container .dropdown-menu a:active, .dropdown-container .dropdown-menu a:focus {
  background-color: #0979ce;
  color: #ffffff;
}

.dropdown-menu,
.dropdown-toggle {
  position: relative;
}
.dropdown-menu::before,
.dropdown-toggle::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border: 5px solid;
  border-top-color: rgba(0, 0, 0, 0);
  border-left-color: rgba(0, 0, 0, 0);
  margin-top: -2.5px;
  background-color: rgba(0, 0, 0, 0);
  transition: all ease-in-out 0.2s;
}

.dropdown-menu {
  z-index: 10;
  position: relative;
}
.dropdown-menu::before {
  z-index: -1;
  transform: rotate(-135deg);
  top: -4px;
  border-color: #ffffff;
  box-shadow: 1px 1px 4px -2px rgba(0, 0, 0, 0.4);
}

.dropdown-open .dropdown-menu.dropdown-active {
  display: block;
}

.dropdown-container.dropdown-open .dropdown-toggle {
  background-color: #0979ce;
  color: #ffffff;
}
.dropdown-container.dropdown-open .dropdown-toggle:before {
  transform: rotate(-135deg);
}

.dropdown-bordered .dropdown-toggle {
  border: 2px solid #000000;
  border-radius: 10px;
}
.dropdown-bordered .dropdown-toggle:hover, .dropdown-bordered .dropdown-toggle:active, .dropdown-bordered .dropdown-toggle:focus {
  background-color: #0979ce;
  color: #ffffff;
  border-color: #ffffff;
}
.dropdown-bordered .dropdown-menu {
  border: 2px solid #000000;
  border-radius: 10px;
}
.dropdown-bordered .dropdown-menu::before {
  border-color: #000000;
}
.dropdown-bordered .dropdown-menu a {
  box-shadow: none;
  border-bottom: 2px solid #000000;
}
.dropdown-bordered .dropdown-menu li:last-child a {
  border-bottom: 0;
}

.dropdown-gradient .dropdown-toggle,
.dropdown-gradient .dropdown-menu,
.dropdown-gradient a {
  background: #ff3131;
  background: -moz-linear-gradient(262deg, #ff3131 11%, #5400ff 100%);
  background: -webkit-linear-gradient(262deg, #ff3131 11%, #5400ff 100%);
  background: linear-gradient(262deg, #ff3131 11%, #5400ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3131",endColorstr="#5400ff",GradientType=1);
  color: #ffffff;
}
.dropdown-gradient .dropdown-toggle::before {
  color: #ffffff;
}
.dropdown-gradient .dropdown-menu a {
  background: none;
  box-shadow: none;
  color: #ffffff;
}
.dropdown-gradient .dropdown-menu a:hover, .dropdown-gradient .dropdown-menu a:active, .dropdown-gradient .dropdown-menu a:focus {
  background: #ff3131;
  background: -moz-linear-gradient(66deg, #ff3131 11%, #5400ff 100%);
  background: -webkit-linear-gradient(66deg, #ff3131 11%, #5400ff 100%);
  background: linear-gradient(66deg, #ff3131 11%, #5400ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3131",endColorstr="#5400ff",GradientType=1);
}
.dropdown-gradient .dropdown-menu::before {
  box-shadow: none;
  border-color: #ff3131;
}

.dropdown-solid .dropdown-toggle,
.dropdown-solid .dropdown-menu {
  background-color: #0979CE;
  color: #ffffff;
}
.dropdown-solid .dropdown-menu a {
  color: #ffffff;
}
.dropdown-solid .dropdown-menu a:hover, .dropdown-solid .dropdown-menu a:active, .dropdown-solid .dropdown-menu a:focus {
  background-color: #ffffff;
  color: #000000;
}
.dropdown-solid .dropdown-menu::before {
  border-color: #0979CE;
}

Add the following JavaScript function for the drop down menu effect:

// Get all the dropdown from document
document.querySelectorAll('.dropdown-toggle').forEach(dropDownFunc);

// Dropdown Open and Close function
function dropDownFunc(dropDown) {
    console.log(dropDown.classList.contains('click-dropdown'));

    if(dropDown.classList.contains('click-dropdown') === true){
        dropDown.addEventListener('click', function (e) {
            e.preventDefault();        
    
            if (this.nextElementSibling.classList.contains('dropdown-active') === true) {
                // Close the clicked dropdown
                this.parentElement.classList.remove('dropdown-open');
                this.nextElementSibling.classList.remove('dropdown-active');
    
            } else {
                // Close the opend dropdown
                closeDropdown();
    
                // add the open and active class(Opening the DropDown)
                this.parentElement.classList.add('dropdown-open');
                this.nextElementSibling.classList.add('dropdown-active');
            }
        });
    }

    if(dropDown.classList.contains('hover-dropdown') === true){

        dropDown.onmouseover  =  dropDown.onmouseout = dropdownHover;

        function dropdownHover(e){
            if(e.type == 'mouseover'){
                // Close the opend dropdown
                closeDropdown();

                // add the open and active class(Opening the DropDown)
                this.parentElement.classList.add('dropdown-open');
                this.nextElementSibling.classList.add('dropdown-active');
                
            }

            // if(e.type == 'mouseout'){
            //     // close the dropdown after user leave the list
            //     e.target.nextElementSibling.onmouseleave = closeDropdown;
            // }
        }
    }

};


// Listen to the doc click
window.addEventListener('click', function (e) {

    // Close the menu if click happen outside menu
    if (e.target.closest('.dropdown-container') === null) {
        // Close the opend dropdown
        closeDropdown();
    }

});


// Close the openend Dropdowns
function closeDropdown() { 
    console.log('run');
    
    // remove the open and active class from other opened Dropdown (Closing the opend DropDown)
    document.querySelectorAll('.dropdown-container').forEach(function (container) { 
        container.classList.remove('dropdown-open')
    });

    document.querySelectorAll('.dropdown-menu').forEach(function (menu) { 
        menu.classList.remove('dropdown-active');
    });
}

// close the dropdown on mouse out from the dropdown list
document.querySelectorAll('.dropdown-menu').forEach(function (dropDownList) { 
    // close the dropdown after user leave the list
    dropDownList.onmouseleave = closeDropdown;
});

That’s all! hopefully, you have successfully created a drop-down menu using JavaScript. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

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