Xây dựng menu Dropdown với jQuery

DEMO

Trong bài hôm nay tôi sẽ hướng dẫn các bạn áp dụng jquery để tạo ra dropdow menu, tức là khi chúng ta click vào menu cha thì nó sẽ đổ ra menu con. Tất nhiên khi chúng ta click vào một lần nữa thì lập tức nó sẽ cuộn lại tất cả những menu con ấy. Và khi các bạn click vào menu nào đó thì lập tức các menu cha khác sẽ phải đóng lại. Để có thể tiếp thu bài này tốt hơn thì các bạn cần phải có chút ít kiến thức về jquery.

1. Xây dựng cấu trúc HTML menu dropdow

Để giải quyết bài toán này, tôi sẽ tiến hành làm theo thứ tự như sau: Do nó chỉ là 1 file html mà thôi nên ngay ngoài desktop tôi tạo file menu.html. Làm việc với menu thì các bạn cũng hiểu là chúng ta sẽ phải đụng chạm đến các thẻ  ul & li. Và sau đây là nội dung của file menu.html của chúng ta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Freetuts.net - Menu Dropdow Use CSS & JQUERY</title>
        
        <script language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        
        <style>
            /*VIẾT CSS TẠI ĐÂY*/
        </style>

        <script language="javascript">
            /*VIẾT JAVASCRIPT TẠI ĐÂY*/
        </script>
    </head>

    <body>
        <ul>
            <li><a  href="#">Home</a>
                <div class="submenu">
                    <ul>
                        <li><a href="#">About US</a></li>
                        <li><a href="#">Sale Off</a></li>
                        <li><a href="#">News</a></li>
                    </ul>	
                </div>
            </li>
            <li><a  href="#">Promotion</a>
                <div class="submenu">
                    <ul>
                        <li><a href="#">Money</a></li>
                        <li><a href="#">Hot Deal</a></li>
                        <li><a href="#">Chewry Junior</a></li>
                    </ul>	
                </div>
            </li>
            <li><a  href="#">Product</a>
                <div class="submenu">
                    <ul>
                        <li><a href="#">Product Random</a></li>
                        <li><a href="#">New Product</a></li>
                        <li><a href="#">Febtured Product</a></li>
                    </ul>	
                </div>
            </li>
        </ul>
    </body>
</html>

Các bước tiếp theo chúng ta sẽ viết CSS vào vị trí thẻ style và viết Javascript vào vị trí the script nhé các bạn. 

Và đây là giao diện chạy lên:

Kết quả như hình xem như xây dựng thành công cấu trúc HTML rồi đấy. Bây giờ ta sẽ thực hiện các bước sau để xây dựng menu dropdown.

Bước 1: Tạo CSS ẩn menu con

Tiếp theo chúng ta sẽ ẩn tất cả các thẻ div.submenu bởi vì nó chỉ hiển thị khi chúng ta click vào menu cha của.

ul li .submenu{ display: none;}

Bước 2: Thêm class selected để xác định menu hiển thị

Chúng ta sẽ dựa vào class selected để biết mà hiển thị menu con tương ứng, mà menu con ở đây là div.submenu nên class của chúng ta sẽ như sau:

ul li.selected .submenu{ display: block;}

Ban đâu class này sẽ không được thêm vào mà chỉ khi nào click vào menu thì ta sử dụng jQuery để thêm vào.

Bước 3: Style cho menu đẹp hơn

Tiếp theo chúng ta cần style cho menu đẹp hơn bằng đoạn mã CSS sau:

ul li{ list-style-type: none;}
a{ text-decoration: none;}
ul a{ display: block; width: 125px; background: orange; border-bottom: 1px solid #ccc;  padding-left: 25px; line-height: 30px; color: white;}
.submenu ul{ margin: 0px; padding: 0px;}
.submenu ul a{ background: blue;}
.submenu ul a:hover{ background: silver;}

Và đây là giao diện tại bước này:

Bước 4: Sư dụng jQuery để viết cho sự kiện click

Tại bước này bạn có một số lưu ý sau:

  • Thứ nhất: Chúng ta thêm sự kiện click cho các thẻ a cấp đầu tiên nên selector của chúng ta sẽ có dạng ul li > a.
  • Thứ hai: Khi click vào thẻ a ở phần thứ nhất thì chúng ta sẽ thêm class selected vào thẻ li cha của the a đang click, lúc này các menu con sẽ hiển thị ra. Nhưng trước khi thêm class selected thì bạn phải chắc chắn rằng đã xóa class selected ở các thẻ li khác bởi vì mình muốn chỉ có thẻ li hiện tại được xổ ra.

Code jQuery như sau:

$(document).ready(function() {
    $("ul li a").click(function() 
    {
        var li = $(this).parent();

        // Kiểm tra có phải click vào menu đã active ko
        // nếu phải thì ko làm gì, ngược lại sẽ xử lý xổ menu con ra
        if (li.hasClass("selected")) {
            return false;
        } 
        else {
            // Xóa class selected khỏi các thẻ li khác
            $('ul li').removeClass('selected');
            // Thêm class selected vào thẻ li hiện tại
            li.addClass("selected");
        }

        // return false nghĩa là cho trang đứng im
        return false; 

    });
});

Và đây là Full Code: XEM DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Freetuts.net - Menu Dropdow Use CSS & JQUERY</title>
        
        <script language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        
        <style>
            /*VIẾT CSS TẠI ĐÂY*/
            ul li{ list-style-type: none;}
            a{ text-decoration: none;}
            ul a{ display: block; width: 125px; background: orange; border-bottom: 1px solid #ccc;  padding-left: 25px; line-height: 30px; color: white;}
            ul li .submenu{ display: none;}
            ul li.selected .submenu{ display: block;}
            .submenu ul{ margin: 0px; padding: 0px;}
            .submenu ul a{ background: blue;}
            .submenu ul a:hover{ background: silver;}
        </style>

        <script language="javascript">
            /*VIẾT JAVASCRIPT TẠI ĐÂY*/
            $(document).ready(function() {
                $("ul li a").click(function() 
                {
                    var li = $(this).parent();

                    // Kiểm tra có phải click vào menu đã active ko
                    // nếu phải thì ko làm gì, ngược lại sẽ xử lý xổ menu con ra
                    if (li.hasClass("selected")) {
                        return false;
                    } 
                    else {
                        // Xóa class selected khỏi các thẻ li khác
                        $('ul li').removeClass('selected');
                        // Thêm class selected vào thẻ li hiện tại
                        li.addClass("selected");
                    }
                    
                    // return false nghĩa là cho trang đứng im
                    return false; 

                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li><a  href="#">Home</a>
                <div class="submenu">
                    <ul>
                        <li><a href="#">About US</a></li>
                        <li><a href="#">Sale Off</a></li>
                        <li><a href="#">News</a></li>
                    </ul>	
                </div>
            </li>
            <li><a  href="#">Promotion</a>
                <div class="submenu">
                    <ul>
                        <li><a href="#">Money</a></li>
                        <li><a href="#">Hot Deal</a></li>
                        <li><a href="#">Chewry Junior</a></li>
                    </ul>	
                </div>
            </li>
            <li><a  href="#">Product</a>
                <div class="submenu">
                    <ul>
                        <li><a href="#">Product Random</a></li>
                        <li><a href="#">New Product</a></li>
                        <li><a href="#">Febtured Product</a></li>
                    </ul>	
                </div>
            </li>
        </ul>
    </body>
</html>

2. Lời kết

Vấn đề quan trọng của bài này là hiểu ý tưởng sử dụng class selected để hiển thị menu con. Thứ hai nữa là hiểu được các hàm có sẵn trong jQuery như hàm addClass, removeClass, đồng thời biết cách áp dụng nó vào bài toán cụ thể.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.