Một trong những thành phần dường như không thể thiếu được trong mỗi Website đó là hệ thống Menu ngang, đây là một trong những hệ thống danh mục thế hiện những nội dung chính của Website, từ đó giúp cho người duyệt Web dễ dàng lựa chọn những chuyên mục mà mình quan tâm. Để giúp các bạn mới nghiên cứu CSS và HTML có định hướng đúng đắn ngay từ đầu trong việc tạo các thành phần trong Website, trong bài viết này tôi xin hướng dẫn các bạn style cho một số kiểu menu ngang ở dạng. | Một vài kiêu Menu ngang đơn giản Một trong những thành phần dường như không thể thiếu được trong mỗi Website đó là hệ thống Menu ngang đây là một trong những hệ thống danh mục thế hiện những nội dung chính của Website từ đó giúp cho người duyệt Web dễ dàng lựa chọn những chuyên mục mà mình quan tâm. Để giúp các bạn mới nghiên cứu CSS và HTML có định hướng đúng đắn ngay từ đầu trong việc tạo các thành phần trong Website trong bài viết này tôi xin hướng dẫn các bạn style cho một số kiểu menu ngang ở dạng đơn giản. Việc đầu tiên mà chúng ta cần thực hiện đó là tạo ra một file HTML và thực hiện viết định dạng cho Menu ngang mà chúng ta định thực hiện. DOCTYPE HTML PUBLIC - W3C DTD HTML Transitional EN html head meta http-equiv content-type content text html charset utf-8 link rel stylesheet type text css href media all title Menu ngang title head body div id mainnav ul li a href class active title Trang chủ Trang chủ a li li a href title Giới thiệu Giới thiệu a li li a href title Sản phẩm Sản phẩm a li li a href title Tin tức Tin tức a li li a href title Hỏi đáp Hỏi đáp a li li a href title Liên hệ Liên hệ a li ul div body html Trong phần định dạng này chúng ta sẽ dùng thẻ ul Underlist để chứa các thành phần của menu để tìm hiểu kỹ hơn vì sao lại dùng thẻ Underlist để chứa các thành phần của menu bạn có thể tìm hiểu thêm trong bài viết Định dạng HTML nào phù hợp với menu . Khi một mục nào đó trong hệ thống Menu được kích hoạt thì chúng ta sẽ đặt vào trong thẻ a bao thành phần đó một class active và chúng ta sẽ định dạng cho thành phần này một màu riêng sao cho nổi bật hơn so với các thành phần Menu khác. Sau khi tạo ra được file HTML xong chúng ta tiến hành định dạng cho hệ thống Menu này bằng CSS Để tạo khung viền cũng như màu sắc cho thanh Menu chúng ta bắt đầu Style cho thẻ div id mainnav . Trong Menu mẫu này chúng ta sẽ lấy màu xanh làm màu chủ đạo màu nền của thanh Menu là F1F8FC và màu của đường viền A2D2EA. mainnav background F1F8FC height 30px
