Tạo thanh menu nhiều màu sắc bằng CSS

Chia sẻ bài viết này:

Màu sắc là một yếu tố quan trọng để tạo nên một giao diện đẹp, thu hút người xem. Có bao giờ bạn nhìn thấy một menu mà mỗi mục của nó là một màu khác nhau chưa? Làm thế nào để được một menu như vậy? Bài viết hôm nay mình sẽ hướng dẫn bạn tạo ra một menu nhiều màu sắc hết sức đơn giản.

menu Tạo thanh menu nhiều màu sắc bằng CSSĐể làm được điều này, chúng ta sẽ thực hiện theo các bước sau:

Thêm lớp CSS cho mỗi menu

Chúng ta sẽ làm việc này bằng cách vào Appearance -> Menus, click vào Screen Options ở góc trên bên phải.

Trong hộp hiện ra, bạn đánh dấu tick vào mục CSS Classes.

Screen Options1 Tạo thanh menu nhiều màu sắc bằng CSS

Tiếp theo, ở mỗi menu mà bạn tạo, bạn sẽ thấy có thêm một mục là CSS Classes, bạn điền tên lớp CSS vào đó và lưu lại.

add css2 Tạo thanh menu nhiều màu sắc bằng CSS
Chú ý ở mỗi menu bạn chọn một tên lớp CSS khác nhau để có thể tạo màu sắc khác nhau.

Thêm CSS code cho mỗi menu

Việc này khá đơn giản đối với các bạn biết về CSS. Ta sẽ thêm các lớp đã tạo ở bước trên vào file style.css. Ở đây lớp mình tạo có tên là home-nav như bạn thấy ở trên.

.home-nav {
	background: #fff !important;
	color: #000;
}
.home-nav a:hover {
	background: #e3e3e3 !important;
}

Hai lớp CSS này sẽ giúp thay đổi màu nền của mục “Trang Chủ” và màu nền khi rê chuột lên menu này. Các bạn chú ý ta có thể thêm thuộc tính !important ở phía sau để tạo độ mạnh cho màu sắc bạn chọn, phủ định các thuộc tính đã có sẵn.

Cứ như vậy với mỗi menu bạn tạo một lớp CSS khác nhau và chọn một màu nền khác nhau, vậy là bạn đã có được một menu với nhiều màu sắc đẹp mắt. Chúc bạn thành công!

VN:F [1.9.22_1171]
Rating: 7.4/10 (7 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 4 votes)
Tìm trên Google
  • sửa css menu wordpress
  • tạo lớp khác màu trong blogspot

Gợi ý - Hosting tốc độ cao Stablehost

Stablehost là dịch vụ hosting tốc độ cao sử dụng công nghệ LiteSpeed Server, có server tại châu Âu và Mỹ. Khuyến mãi giảm giá lên đến 40% với coupon: RAY40.
Mua Ngay
Giới thiệu tác giả: Lê Hoài Bảo

Mình tên là Bảo, một blogger không biết chút gì về lập trình, blog là nơi mình viết về những thứ linh tinh mình tìm hiểu được. Cảm ơn các bạn đã ghé thăm blog. Chúc các bạn có một ngày làm việc vui vẻ!

6 bình luận

  1. Rất tuyệt. Chắc phải thử cho web thêm sinh động. Tks nhé
    Nguyễn Hiếu recently posted…Bất động sản- Cách làm giàu tốt nhất?My Profile

  2. Em mới tạo lại Blog ! {c27} Nhưng vì ko có điều kiện kinh tế nên đành tạo blog với host miễn phí ! {c4} Chính vì thế mà nó chậm hẳn ! {c26} Bác có thể cài giùm em WP Super Cache được ko ạ ! {c33}

  3. Anh có thể chỉ cho em mấy lớp Css đẹp của mấy cái menu demo ở trên ko /

  4. Em tạo Menu đa cấp theo dạng xổ dọc. Giờ em muốn chỉnh tốc độ xổ xuống của Menu con khi mình trỏ chuột vào Menu mẹ ( nhanh hơn or chậm hơn ) thì chỉnh sửa chỗ nào ạ?

  5. hoangduy says:

    {c26} {c26} mình làm giống bạn hướng dẫn rồi nhưng vẫn không được. có có biết lí do tại sao không? {c26}

Gửi bình luận

CommentLuv badge
{c1} {c2} {c3} {c26} {c27} {c28} {c20} {c4} {c5} {c6} more »