WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Dropdown Menu
9373
webleb
Publish Your Code
Recommended
11 September 2023
CSS Social Icons
10 July 2025
HTML Restaurant Menu Template
31 January 2025
Pure CSS card movies 3D
index.html
Copy
<html> <head> <meta charset="utf-8" /> <title>Webleb</title> <link href="/css/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <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> </div> </div> <script src="/js/main.js"></script> </body> </html>
styles.css
Copy
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-color: #033ac5; --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; padding: 1.5rem; line-height: 1.4; background: #00B4DB; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #0083B0, #00B4DB); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } 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; } .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); }
main.js
Copy
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"); });
