Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tìm hiểu chức năng tìm kiếm nội dung trong menu thả xuống bằng HTML, CSS và JavaScript.
Click vào nút button để ẩn/ hiện menu thả xuống, nhập giá trị bất kỳ vào thanh search bar để tìm kiếm.
Bước 1) Thêm HTML:
Ví dụ
<div class="myContainer"> <button type="button" class="myBtn">Dropdown <i class="fa fa-caret-down"></i></button> <div class="dropDown"> <input type="text" id="myInput" placeholder="Search ..." /> <div class="dropMenu"> <a href="#">About</a> <a href="#">Base</a> <a href="#">Blog</a> <a href="#">Contact</a> <a href="#">Custom</a> <a href="#">Support</a> <a href="#">Tools</a> </div> </div> </div>
Bước 2) Thêm CSS:
Ví dụ
/* Tạo kiểu cho nút button */ .myBtn { border:none; outline:none; padding:10px 15px; background-color:dodgerblue; color:white; cursor:pointer; user-select:none; } /* Thêm hiệu ứng khi hover */ .myBtn:hover { background-color:orange; } /* Tạo kei63 cho lớp dropdown */ .dropDown { width:300px; min-width:250px; border:1px solid #ccc; display:block; background-color:#f1f1f1; z-index:999; } /* Tạo kiểu cho phần tử input */ .dropDown > input { border:none; border-bottom:1px solid #ccc; padding:10px 0; padding-left:32px; width:100%; background-image:url(/images/searchicon.png); background-repeat:no-repeat; background-position:8px; } /* Tạo kiểu cho các liên kết a */ .dropDown > .dropMenu > a { text-decoration:none; color:black; display:block; padding:10px 15px; width:100%; } /* Thêm hiệu ứng khi hover */ .dropDown > .dropMenu > a:hover { background-color:#ccc; }
Bước 3) Thêm JavaScript:
Ví dụ
<script> searchMenu(); // Chuyển đổi ẩn/ hiện menu dropdown khi người dung click chuột var myBtn, dropDown; myBtn = document.getElementsByClassName('myBtn')[0]; dropDown = document.getElementsByClassName('dropDown')[0]; myBtn.onclick = function() { if(dropDown.style.display == "none") { dropDown.style.display = "block"; }else{ dropDown.style.display = "none"; } } // Định nghĩa hàm lọc menu theo giá trị nhập vào function searchMenu() { var myInput, val, dropMenu, a, i, text; myInput = document.getElementById('myInput'); myInput.onkeyup = function() { val = this.value.toLowerCase(); dropMenu = document.getElementsByClassName('dropMenu')[0]; a = dropMenu.getElementsByTagName("a"); for(i = 0; i < a.length; i++) { text = a[i].innerText.toLowerCase(); if(text.indexOf(val) > -1) { a[i].style.display = ""; }else{ a[i].style.display = "none"; } } } } </script>