Thiết Kế Web

Tạo menu ngang hai cấp bằng CSS và HTML

Bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML một cấp. Tiếp bài viết hôm nay hình sẽ hướng dẫn các bạn phát triển từ menu ngang một cập lên menu ngang …

Bài trước mình đã hướng dẫn các bạn Tạo menu ngang đơn giản bằng CSS và HTML một cấp. Tiếp bài viết hôm nay hình sẽ hướng dẫn các bạn phát triển từ menu ngang một cập lên menu ngang 2 cấp hay còn gọi là menu đa cấp một cách đơn giản và dễ hiểu nhất.

Menu đa cấp (multi-level menu) là một menu trong đó một item nào đó của list lại chứa một list khác bên trong nó.

Tương tự như bài trước thì đầu tiên chúng ta tạo file menu.html và thiết kế HTML để có được một menu ngang như sau.

Untitled-1_02

Và dưới đây là mã HTML mình viết trong file menu.html

Sau khi viết mã HTML vào file menu.html các bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang 2 cấp phải không. Các bạn yên tâm để làm cho nó trở thành một thanh menu ngang 2 cấp tuyệt đẹp thì chúng ta sẽ CSS để chính sửa nó. Tương tự như bài trước các bạn có thể viết CSS trong phần <head> hoặc tạo một file CSS bên ngoài rồi sau đó dẫn nó vào file menu.html. Ở đây mình sẽ viết CSS vào file riêng style.css. Dưới đây là các lệnh mình viết trong file style.css.

Sau khi các bạn viết các lệnh CSS này xong thì các bạn ra ngoài chạy file menu.html để xem kết quả như trên nhé. Chúc các bạn sẽ làm được một thanh menu ngang hai cấp bằng HTML và CSS thật đẹp. Trên đây là mình đã hướng dẫn các bạn tạo một menu ngang đa cấp, chính xác là menu ngang 2 cấp từ đó các bạn có thể phát triển thêm các dạng menu ngang đa cấp khác nhé.  Hy vọng bài viết này sẽ giúp ích cho các bạn mới bắt đầu với Thiết kế website

Thẻ:, , , , ,
comments powered by Disqus
Powered by HTH Company