Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Hướng dẫn tạo menu dropdown bằng Javascript
Trong bài này mình sẽ hướng dẫn cách tạo menu dropdown bằng javascript, đây là bài tập javascript cơ bản về sự kết hợp giữa HTML - CSS - Javascript.
Chúng ta sẽ xây dựng một menu dropdown bằng javascript chứ không sử dụng jquery. Đây là một dạng menu khá thông dụng, và chắc chắn sau này bạn sẽ gặp phải khi làm các website thực tế.
1. Phần HTML và CSS cho menu dropdown
Trước tiên chúng ta cần xây dựng HTML cho menu. Bạn tạo một file bất kì với đuôi là .html, sau đó viết một đoạn mã HTML xây dựng menu như sau:
<ul id="dropdown">
<li><a href="#">Trang chủ</a></li>
<li>
<a href="#">Sản phẩm</a>
<ul>
<li><a href="#">Gạch cao cấp</a></li>
<li><a href="#">Gạch thủ công</a></li>
<li><a href="#">Gạch hoa văn</a></li>
</ul>
</li>
<li>
<a href="#">Tin tức</a>
<ul>
<li><a href="#">Tin công nghệ</a></li>
<li><a href="#">Tin trong nước</a></li>
<li><a href="#">Tin thời sự</a></li>
</ul>
</li>
<li>
<a href="#">Dịch vụ</a>
<ul>
<li><a href="#">Thiết kế web</a></li>
<li><a href="#">Quảng cáo web</a></li>
<li><a href="#">Thiết kế đồ họa</a></li>
</ul>
</li>
</ul>Ok, tiếp theo chúng ta sẽ viết CSS style cho menu này:
Bài viết này được đăng tại [free tuts .net]
#dropdown {
width: 200px
}
#dropdown li{
list-style:none;
line-height: 30px;
background: blue;
margin: 2px;
}
#dropdown li a{
margin-left: 10px;
color: #FFF;
text-decoration: none;
}
#dropdown ul{
display:none;
padding: 0px;
background: pink
}
#dropdown ul li{
background-color: pink
}Và đây là giao diện sau khi chúng ta thực hiện xong bước 1.
2. Code Javascript hiệu ứng dropdown menu
Nhiệm vụ tiếp theo là cần viết một đoạn mã javascript để thực hiện hiệu ứng khi click vào các menu cha thì sẽ xổ ra các menu con.
Chung ta sẽ sử dụng hàm addEventListener() để gán sự kiện click cho các thẻ a của menu. Tuy nhiên, có một lưu ý rằng vì chúng ta gán sự kiện cho nhiều menu nên phải sử dụng vòng lặp for. Vấn đề này mình đã trình bài ở các bài trước rồi nên sẽ không nhắc lại nữa.
Và đây là đoạn mã Javascript code menu dropdow như sau:
// Lấy danh sách menu
var menu = document.querySelectorAll('#dropdown > li');
// Lặp qua từng menu để gán sự kiện click
for (var i = 0; i < menu.length; i++)
{
menu[i].addEventListener("click", function()
{
// Ẩn hết menu con
var menuList = document.querySelectorAll('#dropdown > li > ul');
for (var j = 0; j < menuList.length; j++){
menuList[j].style.display = "none";
}
// Hiển thị menu hiện tại
// đối tượng this chính là thẻ li hiện tại
// nên ta sử dụng mảng childrent để lấy danh sách thẻ con
// mà thẻ ul nằm ở vị trí thứ 2 nên trong mảng con nó
// sẽ có vị trí là 1 (mảng bắt đầu từ 0)
this.children[1].style.display = "block";
});
}Và cuối cùng là full code cho ví dụ này:
<html>
<head>
<style type="text/css">
#dropdown {
width: 200px
}
#dropdown li{
list-style:none;
line-height: 30px;
background: blue;
margin: 2px;
}
#dropdown li a{
margin-left: 10px;
color: #FFF;
text-decoration: none;
}
#dropdown ul{
display:none;
padding: 0px;
background: pink
}
#dropdown ul li{
background-color: pink
}
</style>
</head>
<body>
<ul id="dropdown">
<li><a href="#">Trang chủ</a></li>
<li>
<a href="#">Sản phẩm</a>
<ul>
<li><a href="#">Gạch cao cấp</a></li>
<li><a href="#">Gạch thủ công</a></li>
<li><a href="#">Gạch hoa văn</a></li>
</ul>
</li>
<li>
<a href="#">Tin tức</a>
<ul>
<li><a href="#">Tin công nghệ</a></li>
<li><a href="#">Tin trong nước</a></li>
<li><a href="#">Tin thời sự</a></li>
</ul>
</li>
<li>
<a href="#">Dịch vụ</a>
<ul>
<li><a href="#">Thiết kế web</a></li>
<li><a href="#">Quảng cáo web</a></li>
<li><a href="#">Thiết kế đồ họa</a></li>
</ul>
</li>
</ul>
<script language="javascript">
// Lấy danh sách menu
var menu = document.querySelectorAll('#dropdown > li');
// Lặp qua từng menu để gán sự kiện click
for (var i = 0; i < menu.length; i++)
{
menu[i].addEventListener("click", function()
{
// Ẩn hết menu con
var menuList = document.querySelectorAll('#dropdown > li > ul');
for (var j = 0; j < menuList.length; j++) {
menuList[j].style.display = "none";
}
// Hiển thị menu hiện tại
// đối tượng this chính là thẻ li hiện tại
// nên ta sử dụng mảng childrent để lấy danh sách thẻ con
// mà thẻ ul nằm ở vị trí thứ 2 nên trong mảng con nó
// sẽ có vị trí là 1 (mảng bắt đầu từ 0)
this.children[1].style.display = "block";
});
}
</script>
</body>
</html>3. Lời kết
Như vậy là mình đã hướng dẫn xong cách tạo menu bằng javascript / html và css.
Ví dụ này hết sức đơn giản nhưng có sử dụng nhiều kiến thức mà ta đã học như đối tượng this, hàm thêm sự kiện addEventListener(), cách sử dụng vòng lặp và DOM để gán sự kiện, ... Sau này, khi học xong Javascript thì các bạn sẽ học jQuery, nó có rất nhiều hàm hỗ trợ để giải quyêt vấn đề này một cách nhanh nhất.
