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 listselect.addEventListener("click", () => {options_list.classList.toggle("active");select.querySelector(".fa-angle-down").classList.toggle("fa-angle-up");});//select optionoptions.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;}
Will this guide also on WordPress Websites?
ReplyDeleteIm from Turkey(Türkiye) Turkey is not hindi.
ReplyDeletePlease correct the word "Hindi" to Türkiye.