Điện thoại/ Zalo
0389934723
Bài 16: Thực hành xây dựng menu dropdown
Sau khi đã được giới thiệu xong các bài lý thuyết rườm rà thì bài này mình sẽ cùng thực hành xây dựng dropdown menu bằng HTML, CSS kết hợp với javascript cho thay đổi không khí nhé!
1, Xây dựng giao diện bằng HTML-CSS.
-Đầu tiên chúng ta sẽ dùng các thẻ ul-li để xây dựng giao diện menu như bình thường.
Xây dựng dropdown menu -toidicode.com
-Tiếp theo đó chúng ta sẽ thêm CSS chó nó đẹp một chút.
Xây dựng dropdown menu -toidicode.com
ul#menu{
list-style: none;
position: relative;
}
ul li{
display: inline-block;
background: #e1e1e1;
padding: 0 15px;
border: 1px solid black;
}
ul li ul{
position: absolute;
top: 20px;
display: none;
}
ul li ul li{
display: block;
background: #e7e7e7;
padding: 0 10px;
}
2, Sử dụng javascript để tạo hiệu ứng dropdown.
-Sau khi đã xây dựng được giao diện rồi thì giờ chúng ta cùng bắt đầu đi vào viết code javascript để tạo ra các dropdown cho menu.
Xây dựng dropdown menu -toidicode.com
ul#menu{
list-style: none;
position: relative;
}
ul li{
display: inline-block;
background: #e1e1e1;
padding: 0 15px;
border: 1px solid black;
}
ul li ul{
position: absolute;
top: 20px;
display: none;
}
ul li ul li{
display: block;
background: #e7e7e7;
padding: 0 10px;
}
//chọn tất cả các thẻ li (con của thẻ ul có id= menu)
var li = document.querySelectorAll('ul#menu li');
//Duyệt tất cả các phần tử li đó
for(i=0; i < li.length; i++){
//và áp sự kiện click lên từng thẻ li
li[i].addEventListener('click',function()
{
//chọn tất cả các thẻ ul con của thẻ li
var ulc = document.querySelectorAll('ul#menu li ul');
//Tiến hàn duyệt từng thẻ ul đó
for(j=0; j=1){
//tiến hành css display=block
child[0].style.display = 'block';
}
});
}
3, Lời kết.
-Đây là một ví dự hết sức là basic nhưng để làm được nó thì các bạn phải lắm được các kiến thức mình đã giới thiệu từ đầu series đến giờ. Trên thực tế thì chúng ta sẽ không xây dựng dropdown menu bằng javascript thuần mà sẽ có các thư viện khác hỗ trợ như jquery,..
