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.
This is really great and easy to implement, Thank you
ReplyDelete