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ội dung trích xuất từ tài liệu:
Một vài kiểu Menu ngang đơn giản Một vài kiểu Menu ngang đơn giảnMột trong những thành phần dường như không thể thiếu được trong mỗiWebsite đó là hệ thống Menu ngang, đây là một trong những hệ thống danhmục thế hiện những nội dung chính của Website, từ đó giúp cho ng ười duyệtWeb dễ dàng lựa chọn những chuyên mục mà mình quan tâm. Để giúp các bạnmới nghiên cứu CSS và HTML có định hướng đúng đắn ngay từ đầu trong việctạ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ạnstyle 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ựchiện viết định dạng cho Menu ngang mà chúng ta định thực hiện. Menu ngang Trang chủ Giới thiệu Sản phẩm Tin tức Hỏi đáp Liên hệ Trong phần định dạng này chúng ta sẽ dùng thẻ ( Underlist ) để chứa cácthành phần của menu, để tìm hiểu kỹ hơn vì sao lại dùng thẻ Underlist để chứacá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ạngHTML 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ẽ đặtvào trong thẻ bao thành phần đó một class = active và chúng ta sẽ địnhdạ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ànhphầ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 Stylecho thẻ . Trong Menu mẫu này chúng ta sẽ lấy màu xanhlàm màu chủ đạo, màu nền của thanh Menu là #F1F8FC và màu c ủa đườngviền: #A2D2EA.#mainnav { background: #F1F8FC; height: 30px; line-height: 30px; width: 950px; margin: 0 auto 30px auto; /* Căn gi ữa màn hình */ border: 1px solid #A2D2EA; text-align: left; /* Fix cho IE */}Tiếp theo chúng ta sẽ định dạng cho thẻ và các thành phần bên trong củaMenu.#mainnav ul { margin: 0; padding: 0; list-style: none;}#mainnav ul li { margin: 0; padding: 0; display: inline; /* Các phần tử li sẽ ở trên một dòng*/}#mainnav li a { color: #333333; font-weight: bold; padding: 0 10px; border-right: 1px solid #A2D2EA; text-transform: uppercase; text-decoration: none;}#mainnav li a:hover,#mainnav li a:active,#mainnav li a:focus { color: #CC0000;}#mainnav li a.active { color: #CC0000;}Trong gói download phía dưới dây sẽ có 3 kiểu Menu ngang, bạn cũng có thểsử dụng lại mã của các kiểu này cho Website c ủa mình.