Hiện nay Dropdown menu hay còn gọi là Menu đa cấp là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều Categories để hiển thị hết nội dung của trang. Do vậy Dropdown menu là dạng menu lý tưởng để giải quyết vấn đề này.Và sau đây mình sẽ hướng dẫn các bạn cách xây dựng một dropdown menu đơn giản và dễ hiểu. Link demo: Menu Dropdown Phần 1: Xây dựng giao diện html Bước1 :Menu cấp 1 Đầu tiên chúng ta sẽ tạo ra nội dung menu cấp 1 được đặt trong một thẻ ul có cấu trúc như sau: Mỗi thẻ ‹li› được gán thêm class=”top-link” mục đích của việc làm này sẽ được nói rõ hơn ở phần về CSS. Bước 2: Menu cấp 2 và các cấp cao hơn Sau đó chúng ta sẽ tiếp tục xây dựng các cấp menu tiếp theo. Các thành phần này cũng có thể được xây dựng tương tự như khi tạo cấp đầu tiên. Ở đây giữa cặp thẻ list ‹li› cụ thể trong ví dụ là phần sản phẩm nữ chúng ta sẽ đưa thêm vào phần nội dung mong muốn khi chỉ vào dòng sản phẩm nữ ở menu. Phần nội dung này là tùy thuộc vào người xây dựng. Ở đây chúng ta cùng có một số chú ý đó là: Phần nội dung của menu cấp 2 phải được viết giữa cặp thẻ ‹li›‹/li› của menu cấp 1 nếu không sẽ gây ra lỗi khi hiển thị cho menu. Sau khi viết xong html ta được kết quả như hình dưới: Phần 2: Viết css tạo giao diện cho menu Trong bài hướng dẫn này , chúng ta sử dụng một file css có tên là style.css để định dạng cho menu. Nếu bạn nào chưa nắm rõ về phần nhúng css vào html , xin hãy vào đây. Bước1: Các định dạng chung và thành phần bao ngoài của menu Bước 2: Định dạng cho menu cấp 1 Phần css dưới đây có tác dụng định dạng cho menu cha ( xếp thành hàng ngang, cũng như căn chỉnh vị trí độ lớn và màu sắc cho menu) . Chú ý: Với background sử dụng màu đơn thuần không có gì đặc biệt, chỉ cần đưa mã màu cần thiết vào là được (mã màu có thể kiểm tra trong photoshop) nhưng các background bằng ảnh cần chú ý tới định dạng ảnh và đường dẫn một cách chính xác nếu không sẽ dẫn tới việc hình ảnh không xuất hiện gây lỗi cho menu. Thuộc tính float nếu sử dụng không phù hợp sẽ khiến cho menu trở nên mất cân đối, xộc xệch và làm giảm hiệu ứng về mặt hình ảnh Ví dụ: thuộc tính float:left sẽ khiến cho thành phần chứa nó lệch sang bên trái và các thành phần khác sẽ được đưa lên lấp đầy phía bên phải của nó. Do đó nếu căn chỉnh không chính xác sẽ dẫn tới việc các div nội dung bị xô đẩy gây lệch lạc mất thẩm mỹ cho menu. Bước 3: Định dạng cho các menu cấp 2 trở lên ( xảy ra khi đưa con trỏ chuột tới một menu cấp cha) Trong phần này có một dòng rất quan trọng đó là display: none nó khiến cho phần nội dung của menu cấp dưới không hiện lên ngay từ đầu. Bước 3: Thiết lập các thuộc tính hover (xảy ra khi đưa chuột vào một thành phần nào đó) Hiển thị sau khi có CSS: Khi hover vào một menu cha có menu con: Phần 3: JQUERY - tạo ra hiệu ứng trượt xuống và lên cho phần menu con khi nó xuất hiện và biến mất Trong bài hướng dẫn này , chúng ta có một hàm jquery được viết trực tiếp trên trang html. Nếu bạn nào chưa nắm rõ về phần nhúng script vào html , xin hãy vào đây. Thực chất trong demo này dropdown menu đã có đầy đủ chức năng tuy nhiên chúng ta có thể bổ sung thêm jquery giúp cho menu của mình thêm mượt mà và sống động hơn. Cụ thể ở đây chúng ta sẽ tạo ra hiệu ứng trượt xuống và lên cho phần menu khi nó xuất hiện và biến mất.
