Javascript Dropdown

In this example below you will see how to do a Javascript Dropdown with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by WenukaGTX, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright WenukaGTX ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Javascript Dropdown</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="dropdown" id="fareDropdown">
  <a id="tourFare" class="dropdown-toggle" for="fare-check">Dropdown</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-option" href="#" data-value="Option 1">Option 1</a></li>
    <li><a class="dropdown-option" href="#" data-value="Option 2">Option 2</a></li>
    <li><a class="dropdown-option" href="#" data-value="Option 3">Option 3</a></li>
    <li><a class="dropdown-option" href="#" data-value="Option 4">Option 4</a></li>
  </ul>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/WenukaGTX/javascript-dropdown-wmdprG */
.dropdown {
  position: relative;
  display: inline-block;
  min-width: 150px;
}
.dropdown .dropdown-toggle {
  font-size: 14px;
  padding: 16px 15px;
  display: block;
  margin-bottom: 0;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  border: 1px solid #ddd;
}
.dropdown .dropdown-toggle:hover {
  cursor: pointer;
}
.dropdown .dropdown-toggle:after {
  content: "";
  position: absolute;
  top: 25px;
  right: 15px;
  border-bottom: 5px solid transparent;
  border-top: 5px solid #000;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.dropdown .dropdown-toggle.open {
  background: rgba(0, 0, 0, 0.1);
}
.dropdown .dropdown-toggle.open:after {
  top: 20px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.dropdown .dropdown-toggle.open ~ .dropdown-menu {
  display: block;
}
.dropdown .dropdown-menu {
  position: absolute;
  padding: 10px 0;
  list-style: none;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  display: none;
  border-top: 1px solid #ddd;
}
.dropdown .dropdown-menu li a {
  padding: 10px 15px;
  font-size: 20px;
  display: block;
  color: #fff;
  text-align: center;
}
.dropdown .dropdown-menu li a:hover {
  background: #ddd;
}


/*Downloaded from https://www.codeseek.co/WenukaGTX/javascript-dropdown-wmdprG */
"use strict";

dropdownToggle();

//dropdown toggle
function dropdownToggle() {
  let dropdown = document.getElementsByClassName("dropdown-toggle");
  for (let i = 0; i < dropdown.length; i++) {
    dropdown[i].onclick = function() {
      dropdown[i].classList.toggle("open");
    };
  }

  let dropOption = document.getElementsByClassName("dropdown-option");
  for (var i = 0; i < dropOption.length; i++) {
    dropOption[i].addEventListener("click", function(event) {
      event.preventDefault();
      //            return false;

      let optionVal = this.dataset.value;
      setFare(optionVal);
    });
  }

  function setFare(value) {
    let dropToggle = document.getElementById("tourFare");
    dropToggle.innerHTML = value;
    dropToggle.classList.remove("open");
  }

  window.addEventListener("click", function(e) {
    if (document.getElementById("fareDropdown").contains(e.target)) {
      // Clicked in box
    } else {
      let dropToggle = document.getElementById("tourFare");
      dropToggle.classList.remove("open");
    }
  });
}
//end dropdown toggle

Comments