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.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> Xây dựng dropdown menu -toidicode.com</title>
</head>
<body>
    <ul id='menu'>
        <li>Trang Chủ</li>
        <li>Dịch vụ
            <ul>
                <li>Thiết kế</li>
                <li>Lập trình</li>
            </ul>
        </li>
        <li>Sản phẩm
            <ul>
                <li>Toidicode.com</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Xem Kết Quả

-Tiếp theo đó chúng ta sẽ thêm CSS chó nó đẹp một chút.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> Xây dựng dropdown menu -toidicode.com</title>
</head>
<style type="text/css" media="screen">
    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;
    }
</style>
<body>
    <ul id='menu'>
        <li>Trang Chủ</li>
        <li>Dịch vụ
            <ul>
                <li>Thiết kế</li>
                <li>Lập trình</li>
            </ul>
        </li>
        <li>Sản phẩm
            <ul>
                <li>Toidicode.com</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Xem Kết Quả

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.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title> Xây dựng dropdown menu -toidicode.com</title>
</head>
<style type="text/css" media="screen">
    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;
    }
</style>
<body>
    <ul id='menu'>
        <li>Trang Chủ</li>
        <li>Dịch vụ
            <ul>
                <li>Thiết kế</li>
                <li>Lập trình</li>
            </ul>
        </li>
        <li>Sản phẩm
            <ul>
                <li>Toidicode.com</li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
        //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< ulc.length; j++){
                    //css cho display = none
                    ulc[j].style.display = 'none';
                }
                //chọn thẻ ul con của thẻ li vừa click
                //this ở đây chính là đối tượng li vừa click
                var child = this.getElementsByTagName('ul');
                //nếu như có tồn tại ul con của li vừa click
                if(child.length >=1){
                    //tiến hành css display=block
                    child[0].style.display = 'block';
                }
            });
        }
    </script>
</body>
</html>

Xem Kết Quả

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,..