CodePen Embed - Custom Dropdown/JS/Javascript Dropdown

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

*{
  box-sizing: border-box;
}

body {
  padding: 30px;
  background: #f2f2f2;
  font-family: "Montserrat", sans-serif;
}

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;

  .col {
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
      flex: 0 0 100%;          

    .dropdown-container {
      margin: 0 auto;
      margin-bottom: 20px;
    }

    @media (min-width: 767px) {
      flex: 0 0 50%;
      max-width: 50%;
    }

    @media (min-width: 992px) {
      flex: 0 0 25%;
      max-width: 25%;
    }
  }
}

/* Dropdown menu css */
.dropdown-container {
  position: relative;
  max-width: 240px;

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

    label {
      cursor: pointer;
      width: 100%;
    }

    &:hover,
    &:active,
    &:focus {
      background-color: #0979ce;
      color: #ffffff;
    }
  }

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

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      overflow: hidden;
      border-radius: 10px;
      z-index: 10;
    }

    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;

      &:hover,
      &:active,
      &:focus {
        background-color: #0979ce;
        color: #ffffff;
      }
    }
  }
}

.dropdown-menu,
.dropdown-toggle {
  position: relative;

  &::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;

  &::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;

    &:before {
      transform: rotate(-135deg);
    }
  }
}

// dropdown-bordered
.dropdown-bordered {
  .dropdown-toggle {
    border: 2px solid #000000;
    border-radius: 10px;

    &:hover,
    &:active,
    &:focus {
      background-color: #0979ce;
      color: #ffffff;
      border-color: #ffffff;
    }
  }

  .dropdown-menu{
    border: 2px solid #000000;
    border-radius: 10px;

    &::before{
      border-color: #000000 ;      
    }    

    a{
      box-shadow: none;
      border-bottom: 2px solid #000000;
    }

    li{
      &:last-child{
        a{
          border-bottom: 0;
        }
      }
    }
  }
}

// dropdown-gradient

.dropdown-gradient{
  .dropdown-toggle,
  .dropdown-menu,
  a{
    background: rgb(255,49,49);
    background: -moz-linear-gradient(262deg, rgba(255,49,49,1) 11%, rgba(84,0,255,1) 100%);
    background: -webkit-linear-gradient(262deg, rgba(255,49,49,1) 11%, rgba(84,0,255,1) 100%);
    background: linear-gradient(262deg, rgba(255,49,49,1) 11%, rgba(84,0,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3131",endColorstr="#5400ff",GradientType=1);
    color: #ffffff;
  }

  .dropdown-toggle{
    &::before{
      color: #ffffff;
    }
  }

  .dropdown-menu{
    a{
      background: none;
      box-shadow: none;
      color: #ffffff;

      &:hover,
      &:active,
      &:focus {
        background: rgb(255,49,49);
        background: -moz-linear-gradient(66deg, rgba(255,49,49,1) 11%, rgba(84,0,255,1) 100%);
        background: -webkit-linear-gradient(66deg, rgba(255,49,49,1) 11%, rgba(84,0,255,1) 100%);
        background: linear-gradient(66deg, rgba(255,49,49,1) 11%, rgba(84,0,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff3131",endColorstr="#5400ff",GradientType=1);
      }
    }

    &::before{
      box-shadow: none;
      border-color: rgb(255,49,49);
    }
  }
  
}


// dropdown-solid

.dropdown-solid{
  .dropdown-toggle,
  .dropdown-menu{
    background-color: #0979CE;
    color: #ffffff;
  }

  .dropdown-menu{
    
    a{
      color: #ffffff;

      &:hover,
      &:active,
      &:focus {
        background-color: #ffffff;
        color: #000000;
      }
    }

    &::before{
      border-color: #0979CE;
    }
    
  }
}

View Compiled


// 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 dropdowns
                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;
});

Run Pen

This Pen is owned by Parth Chaudhary on CodePen.

See more by @devparth on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.