You are currently viewing Html dropdown menu | dropdown menu using html css javascript

Html dropdown menu | dropdown menu using html css javascript

Html dropdown menu | dropdown menu using html css javascript

Welcome to Code With Random blog. In this blog, we learn how we create an HTML dropdown menu. We use HTML, Css, and javascript for this Html dropdown menu. Hope you enjoy our blog so let’s start with a basic HTML structure for an Html dropdown menu.

HTML code

 <div class="dropdown-container">  
  <button class="dropdown-button main-button">  
   <span class="dropdown-title-icon">  
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">  
     <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />  
    </svg>  
   </span>  
   <span class="dropdown-title text-truncate">Facebook</span>  
   <span class="dropdown-arrow">  
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">  
     <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" />  
    </svg>  
   </span>  
  </button>  
  <div class="dropdown-list-container">  
   <div class="dropdown-list-wrapper">  
    <ul class="dropdown-list"></ul>  
    <div class="floating-icon" aria-hidden="true"></div>  
   </div>  
  </div>  
 </div>  

There is all HTML code for the Html dropdown menu. Now, you can see output without CSS, then we write css & javascript for Html dropdown menu.

output

CSS Code

 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");  
 *,  
 *::before,  
 *::after {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 :root {  
  --bg-color: #222429;  
  --primary-bg-color: #333740;  
  --primary-color: #2c62f6;  
  --text-color: #b1b8ca;  
  --text-active: #ffffff;  
  --button-hover-bg-color: #2b2e34;  
  --border-color: #494d59;  
  --dropdown-height: 0;  
  --rotate-arrow: 0;  
  --translate-value: 0;  
  --list-opacity: 0;  
  --transition-time: 0.4s;  
  --transition-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);  
  --border-radius: 1.4rem;  
  --list-button-height: 4.6rem;  
  --floating-icon-size: 26;  
  --floating-icon-top: 0;  
  --floating-icon-left: 0;  
 }  
 html {  
  font-size: 62.5%;  
 }  
 html,  
 body {  
  height: 100%;  
 }  
 body {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  background-color: var(--bg-color);  
  padding: 1.5rem;  
  line-height: 1.4;  
 }  
 button {  
  border: none;  
  cursor: pointer;  
  background-color: transparent;  
  outline: none;  
 }  
 svg {  
  height: 1.6rem;  
  width: 1.6rem;  
 }  
 .text-truncate {  
  text-overflow: ellipsis;  
  overflow: hidden;  
  white-space: nowrap;  
 }  
 .dropdown-container {  
  margin-top: 30vh;  
  display: flex;  
  flex-direction: column;  
  width: 100%;  
  max-width: 34rem;  
 }  
 .dropdown-title-icon,  
 .dropdown-arrow {  
  display: inline-flex;  
 }  
 .dropdown-title {  
  margin: 0 auto 0 1.8rem;  
  text-transform: capitalize;  
 }  
 .dropdown-button {  
  font-family: "Roboto", sans-serif;  
  font-weight: 400;  
  font-size: 1.7rem;  
  display: flex;  
  align-items: center;  
  padding: 0 1.8rem;  
 }  
 .dropdown-button svg {  
  transition: all var(--transition-time) var(--transition-timing);  
  fill: var(--text-color);  
 }  
 .dropdown-button svg,  
 .dropdown-button span {  
  pointer-events: none;  
 }  
 .dropdown-button:hover,  
 .dropdown-button:focus {  
  color: var(--text-active);  
 }  
 .dropdown-button:hover svg,  
 .dropdown-button:focus svg {  
  fill: var(--text-active);  
 }  
 .main-button {  
  height: 5.2rem;  
  border-radius: var(--border-radius);  
  color: var(--text-color);  
  background-color: var(--primary-bg-color);  
  border: 0.1rem solid var(--border-color);  
  transition: all var(--transition-time) var(--transition-timing);  
 }  
 .main-button:focus {  
  border: 0.1rem solid var(--primary-color);  
  box-shadow: 0 0 0 0.2rem rgba(44, 98, 246, 0.4);  
 }  
 .main-button .dropdown-arrow {  
  transition: transform var(--transition-time) var(--transition-timing);  
  transform: rotate(var(--rotate-arrow));  
  margin-left: 1.8rem;  
 }  
 .list-button {  
  height: var(--list-button-height);  
  transition: color var(--transition-time) var(--transition-timing);  
  color: var(--text-color);  
  overflow: hidden;  
  cursor: none;  
 }  
 .dropdown-list-container {  
  overflow: hidden;  
  max-height: var(--dropdown-height);  
  transition: max-height var(--transition-time) var(--transition-timing);  
 }  
 .dropdown-list-wrapper {  
  margin-top: 1rem;  
  padding: 1rem;  
  background-color: var(--primary-bg-color);  
  border-radius: var(--border-radius);  
  border: 0.1rem solid var(--border-color);  
  position: relative;  
 }  
 ul.dropdown-list {  
  position: relative;  
  list-style-type: none;  
 }  
 ul.dropdown-list::before {  
  content: "";  
  position: absolute;  
  top: 0;  
  right: 0;  
  left: 0;  
  z-index: 0;  
  opacity: 0;  
  height: var(--list-button-height);  
  background-color: var(--button-hover-bg-color);  
  transition: all var(--transition-time) linear;  
  transform: translateY(var(--translate-value));  
  border-radius: var(--border-radius);  
  pointer-events: none;  
 }  
 ul.dropdown-list:hover::before,  
 ul.dropdown-list:hover ~ .floating-icon {  
  opacity: 1;  
 }  
 li.dropdown-list-item {  
  display: flex;  
  flex-direction: column;  
  position: relative;  
  z-index: 1;  
  opacity: var(--list-opacity);  
  transition: opacity 0.8s var(--transition-timing);  
 }  
 .floating-icon {  
  height: calc(var(--floating-icon-size) * 1px);  
  width: calc(var(--floating-icon-size) * 1px);  
  position: absolute;  
  top: var(--floating-icon-top);  
  left: var(--floating-icon-left);  
  background-color: var(--border-color);  
  border-radius: 1rem;  
  pointer-events: none;  
  opacity: 0;  
  transition: opacity var(--transition-time) var(--transition-timing);  
  z-index: 2;  
  display: inline-flex;  
  align-items: center;  
  justify-content: center;  
 }  
 .floating-icon svg {  
  fill: var(--text-active);  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output

Javascript code 

 const root = document.documentElement;  
 const dropdownTitleIcon = document.querySelector(".dropdown-title-icon");  
 const dropdownTitle = document.querySelector(".dropdown-title");  
 const dropdownList = document.querySelector(".dropdown-list");  
 const mainButton = document.querySelector(".main-button");  
 const floatingIcon = document.querySelector(".floating-icon");  
 const icons = {  
  linkedin:  
   "M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z",  
  instagram:  
   "M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z",  
  facebook:  
   "M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z",  
  twitter:  
   "M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z",  
  youtube:  
   "M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"  
 };  
 const listItems = ["Linkedin", "Instagram", "Facebook", "Twitter", "Youtube"];  
 const iconTemplate = (path) => {  
  return `  
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">  
    <path d="${path}" />  
   </svg>  
  `;  
 };  
 const listItemTemplate = (text, translateValue) => {  
  return `  
   <li class="dropdown-list-item">  
    <button class="dropdown-button list-button" data-translate-value="${translateValue}%">  
     <span class="text-truncate">${text}</span>  
    </button>  
   </li>  
  `;  
 };  
 const renderListItems = () => {  
  dropdownList.innerHTML += listItems  
   .map((item, index) => {  
    return listItemTemplate(item, 100 * index);  
   })  
   .join("");  
 };  
 window.addEventListener("load", () => {  
  renderListItems();  
 });  
 const setDropdownProps = (deg, ht, opacity) => {  
  root.style.setProperty("--rotate-arrow", deg !== 0 ? deg + "deg" : 0);  
  root.style.setProperty("--dropdown-height", ht !== 0 ? ht + "rem" : 0);  
  root.style.setProperty("--list-opacity", opacity);  
 };  
 mainButton.addEventListener("click", () => {  
  const listWrapperSizes = 3.5; // margins, paddings & borders  
  const dropdownOpenHeight = 4.6 * listItems.length + listWrapperSizes;  
  const currDropdownHeight =  
   root.style.getPropertyValue("--dropdown-height") || "0";  
  currDropdownHeight === "0"  
   ? setDropdownProps(180, dropdownOpenHeight, 1)  
   : setDropdownProps(0, 0, 0);  
 });  
 dropdownList.addEventListener("mouseover", (e) => {  
  const translateValue = e.target.dataset.translateValue;  
  root.style.setProperty("--translate-value", translateValue);  
 });  
 dropdownList.addEventListener("click", (e) => {  
  const clickedItemText = e.target.innerText.toLowerCase().trim();  
  const clickedItemIcon = icons[clickedItemText];  
  dropdownTitleIcon.innerHTML = iconTemplate(clickedItemIcon);  
  dropdownTitle.innerHTML = clickedItemText;  
  setDropdownProps(0, 0, 0);  
 });  
 dropdownList.addEventListener("mousemove", (e) => {  
  const iconSize = root.style.getPropertyValue("--floating-icon-size") || 0;  
  const x = e.clientX - dropdownList.getBoundingClientRect().x;  
  const y = e.clientY - dropdownList.getBoundingClientRect().y;  
  const targetText = e.target.innerText.toLowerCase().trim();  
  const hoverItemText = icons[targetText];  
  floatingIcon.innerHTML = iconTemplate(hoverItemText);  
  root.style.setProperty("--floating-icon-left", x - iconSize / 2 + "px");  
  root.style.setProperty("--floating-icon-top", y - iconSize / 2 + "px");  
 });  

Final output

 

Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Html dropdown menu. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you !

In this post, we learn how to create an Html dropdown menu using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Leave a Reply