Custom Dropdown using HTML CSS & JavaScript – Project

Web Development

Create a custom dropdown menu using HTML CSS and JavaScript. In this javascript project you will learn how to create a custom dropdown by creating unordered list using HTML style it using CSS and add functionality using JavaScript

Project Content

  • Create html css and javascript files in Visual Studio code
  • Create html5 boilerplate
  • Add Font awesome to html
  • Create the main containern class
  • Create a HTML input tag as the selector
  • Create a html ul for the options
  • use font awesome icons in html
  • Create style.css file
  • CSS general reset and setup
  • Create CSS Variables
  • Use google fonts in html
  • Styling the general container class using CSS
  • Style the options container using CSS
  • Styling the Arrow Icon using CSS
  • Styling the dropdown options container using CSS
  • Create dropdown on using JavaScript
  • Using on focus event listener in javascript
  • Using onblur event listener in javascript
  • Using forEach loop

HTML

As always you will start out by creating a HTML5 boilerplate and font Awesome to the head for icons. For font awesome use the provided CDN

Before you start your project I always suggest to wrap the project into a div with a class of container use it for furder styling with CSS

<div class="container">
      <h1>Custom dropdown</h1>
      <div class="select-box">
        <div class="input-container">
          <input
            type="text"
            class="selected"
            placeholder="Select a programing language"
          />
          <i class="fa-solid fa-arrow-down" id="arrow"></i>
        </div>
        <ul class="options-container">
          <li class="option"><i class="fa-brands fa-html5"></i> HTML</li>
          <li class="option"><i class="fa-brands fa-css3-alt"></i> CSS</li>
          <li class="option"><i class="fa-brands fa-js"></i> JavaScript</li>
          <li class="option"><i class="fa-brands fa-sass"></i> Sass/Scss</li>
          <li class="option">
            <i class="fa-solid fa-file-code"></i> TypeScript
          </li>
          <li class="option"><i class="fa-brands fa-node-js"></i> NodeJS</li>
          <li class="option"><i class="fa-brands fa-python"></i> Python</li>
          <li class="option"><i class="fa-solid fa-database"></i> SQL</li>
          <li class="option"><i class="fa-brands fa-rust"></i> Rust</li>
        </ul>
      </div>
    </div>

CSS

Start your CSS with a general reset of margins and padding. Next add CSS Variables for ease flexability and a preferred font from Google fonts . I personally went with the Poppins font, it just fits the project.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}
:root {
  --bg: #f6f6ff;
  --light: #c6cdc0;
  --mid: #016960;
  --dark: #293a4e;
  --boxShadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}
@import url("https://fonts.googleapis.com/css2?family=Grape+Nuts&family=Poppins:wght@100;200;300;400;500;600;700;900&display=swap");
body {
  background: var(--bg);
  font-family: "Grape Nuts", cursive;
  /* font-family: "Poppins", sans-serif; */
}

.container {
  margin-top: 100px;
  padding: 3rem;
}
h1 {
  margin: 1rem;
  margin-left: 0;
  color: var(-dark);
}
.select-box {
  display: flex;
  flex-direction: column;
  width: 400px;
}
.selected {
  position: relative;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--mid);
  margin-bottom: 10px;
  color: #f6f6ff;
  box-shadow: var(--boxShadow);
  padding: 12px 24px;
}
.selected::placeholder {
  color: var(--mid);
  font-weight: 600;
}

.input-container {
  position: relative;
}
#arrow {
  color: var(--dark);
  position: absolute;
  right: 12px;
  top: 12px;
}
.fa-arrow-up {
  color: var(--bg) !important;
}

.options-container {
  background: var(--dark);
  color: var(--bg);
  width: 100%;
  transition: all 0.5s;
  border-radius: 8px;
  overflow: hidden;

  opacity: 0;
  max-height: 0;
}
.options-container.active {
  max-height: 240px;
  border: 1px solid var(--dark);
  box-shadow: var(--boxShadow);
  opacity: 1;
  overflow-y: scroll;
}
.options-container::-webkit-scrollbar {
  width: 8px;
  background: var(--light);
  border-radius: 0 8px 8px 0;
}
.options-container::-webkit-scrollbar-thumb {
  background: var(--mid);
  border-radius: 0 8px 8px 0;
}
.option {
  padding: 12px 24px;
  cursor: pointer;
}
.option:hover {
  background: var(--bg);
  color: var(--dark);
}

JavaScript

Create your javascript file, name it script.js or main.js. Now start getting your elements from the DOM.

Next use Javascripts onfocus event listener and onblur event listener to add styling and add or remove css classes from the selected element.

// Get DOM Elements

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");
const optionsList = document.querySelectorAll(".option");
const arrow = document.querySelector("#arrow");

// console.log(selected, optionsContainer, optionsList, arrow);

selected.onfocus = () => {
  //   console.log("focus");
  selected.style.backgroundColor = "var(--dark)";
  optionsContainer.classList.toggle("active");
  if (arrow.classList.contains("fa-arrow-down")) {
    arrow.classList.remove("fa-arrow-down");
    arrow.classList.add("fa-arrow-up");
  }
};

selected.onblur = () => {
  //   console.log("blur");
  selected.style.backgroundColor = "initial";
  optionsContainer.classList.toggle("active");
  if (arrow.classList.contains("fa-arrow-up")) {
    arrow.classList.remove("fa-arrow-up");
    arrow.classList.add("fa-arrow-down");
  }
};

// Select element form dropdown list and display selected element

optionsList.forEach(
  (item) =>
    (item.onclick = () => {
      console.log(item.innerText);
      selected.placeholder = item.innerText;
      document.querySelector("h1").innerHTML = item.innerHTML;
    })
);

Video Tutorial

Check out the complete video tutorial for this JavaScript project, and have a more in depth understanding of the project.

Custom Dropdown using HTML CSS & JavaScript

Latest Posts

Check out my latest post and get more tutorials and projects.

New CSS Container Queries

Learn CSS Container Queries the new css feature that helps you style sidebars, aside and side navigations on different screen width. What problem do container queries …
Read More

React Crash Course

About this React course Welcome the my React Crash Course.In this course you will learn all the basics of React JS witch will set you up …
Read More

Halloween Afterparty SALES

Booo everyone, don’t get scared, get in to the big sale. BIG Promotion sale for Halloween Afterparty, Web development course for beginner front end web developers to …
Read More

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.