How to Create a Custom Select Menu using HTML, CSS and JavaScript

 


In this blog post, We will build an amazing customized select menu using only HTML, CSS and JavaScript

THE VIDEO


THE HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Select Menu</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="select-menu">
    <div class="select">
      <span>Select Language</span>
      <i class="fas fa-angle-down"></i>
    </div>
    <div class="options-list">
      <div class="option">English</div>
      <div class="option">Arabic</div>
      <div class="option">Hindi</div>
      <div class="option">Spanish</div>
      <div class="option">French</div>
      <div class="option">Japanese</div>
      <div class="option">Korean</div>
    </div>
  </div>


  <script>
    const select = document.querySelector(".select");
    const options_list = document.querySelector(".options-list");
    const options = document.querySelectorAll(".option");

    //show & hide options list
    select.addEventListener("click", () => {
      options_list.classList.toggle("active");
      select.querySelector(".fa-angle-down").classList.toggle("fa-angle-up");
    });

    //select option
    options.forEach((option) => {
      option.addEventListener("click", () => {
        options.forEach((option) => {option.classList.remove('selected')});
        select.querySelector("span").innerHTML = option.innerHTML;
        option.classList.add("selected");
        options_list.classList.toggle("active");
        select.querySelector(".fa-angle-down").classList.toggle("fa-angle-up");
      });
    });
  </script>
</body>
</html>

THE CSS
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat";
}

body{
  background-color: #c7ecee;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-menu{
  width: 300px;
  cursor: pointer;
  position: relative;
}

.select{
  background-color: #201e1e;
  padding: 20px;
  color: #fff;
  font-weight: 500;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options-list{
  position: absolute;
  width: 100%;
  background-color: #f9f9f9;
  border-radius: 6px;
  margin-top: 14px;
  padding: 0 20px;
  max-height: 180px;
  overflow-y: auto;
  transition: .4s linear .2s;
  height: 0;
}

.option{
  padding: 8px 0;
  font-weight: 500;
  font-size: 14px;
  transition: .3s ease-in-out;
}

.option:hover,
.option.selected{
  color: #00a8ff;
}

.options-list::-webkit-scrollbar{
  width: 4px;
  background-color: #eee;
}

.options-list::-webkit-scrollbar-thumb{
  background-color: #00a8ff;
}

.options-list.active{
  height: 180px;
}

Comments