how to create a custom drop down menu using html, css and jquery

09/09/2020    By: christoper unum







If you have tried styling the select element, you should know by now that it is not an easy task. In this tutorial, we will be creating a customized drop-down menu. The drop-down menu above is the end result of this tutorial, feel free to check it out.

Prerequisite

Basic knowledge of HTML, CSS and JavaScript (JQUERY) is required to fully grasp the concepts in this tutorial

HTML

Now we lay down the structure for our drop-down menu using html 

<div id="dropdown-container">
  <div id="choice">
    <div id="selection"></div>
    <div id="symbol"><i class="fas fa-caret-down"></i></div>
  </div>
  <div id="options">
    
  </div>
</div>

CSS

Now we style the html

#dropdown-container{
  margin:5px auto
  max-width:250px
  background:#B5B5B5;
  cursor:pointer;
  position:relative;
}
#selection{
  display:inline-block;
  width:87%;
  
}
  #symbol{
  display:inline-block;
  width:9%;
  text-align:center;
  
}
#choice div,
#options div {
  padding5px 8px;
  max-width:250px;
}

#options {
  background#1A95C4;
  colorwhite;
  displaynone;
  position:absolute;
  width:100%;
}
#options div:hover {
  background#67C3E6;
}

JavaScript

To include JQUERY, you can add the link below just before your JavaScript code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Now we add JavaScript code to our html code to make it active.

//array of dropdown items
const options = ["Orange","Apple","Kiwi","Strawberry","Mango"];
//sorts the array
options.sort();
//makes the first element of the array the selected option
let selection = options[0];
//counter for arrow direction change
let x=0;

//populates the dropdown menu
const populateDropdown = () => {
  //sets the selected item
  $("#selection").html(`<b>${selection}</b>`);
  //resets the options div
  $("#options").html("");
  //loops through the options
  for(let i=0; i<options.length; i++){
    //checks if option is the selected item then omits it.
    if(options[i] != selection){
      //appends the item to the options div
      $("#options").append(`<div id="kyc" onclick="selectOption('${options[i]}')">${options[i]}</div>`);
    }
  }
}

populateDropdown();

//changes selected option
const selectOption = (value) => {
selection = value;
populateDropdown();
$("#options").slideUp();
//changes the arrow direction
  if(x == 0){
    $("#symbol").html(`<i class="fas fa-caret-up"></i>`);
    x=1;
  }else{
    $("#symbol").html(`<i class="fas fa-caret-down"></i>`);
    x=0;
  }
}

//listens for clicks on the selection div
document.querySelector("#choice").addEventListener("click", () => {
  //slides up and down the options div
  $("#options").slideToggle();
  //changes the arrow direction
  if(x == 0){
    $("#symbol").html(`<i class="fas fa-caret-up"></i>`);
    x=1;
  }else{
    $("#symbol").html(`<i class="fas fa-caret-down"></i>`);
    x=0;
  }
});

conclusion

We've come to the end of the tutorial, you can also add your tweaks to what is already on ground if you like. see you in the next



Recent Posts

blog image
blog image
blog image

Our Newsletters