Hướng dẫn tạo thanh menu nhiều màu sắc bằng CSS

Màu sắc luôn là một yếu tố thu hút người xem cực mạnh, một màu sắc thiện cảm có thể để lại một dấu ấn khó quên trong lòng bạn đọc. Đã bao giờ bạn đã nhìn thấy ở đâu đó một menu mà một phần của nó có màu sắc riêng biệt? Nếu đã nhìn thấy thì chắc hẳn bạn đã bị nó gây chú ý ngay từ giây phút ban đầu phải không? Bạn tự hỏi họ đã làm như thế nào. Nếu đã từng thắc mắc như thế và chưa biết câu trả lời thì hãy đọc ngay bài viết này của ChiaseWP nhé. Hôm nay tôi sẽ hướng dẫn các bạn tạo menu nhiều màu sắc như thế bằng CSS.

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

Để làm được việc này, các bạn vào Appearance > Menus. Click vào Screen Options ở góc bên phải màn hình. Trong khung Boxes hiện ra, bạn tick vào mục CSS Classes.

Bây giờ, mỗi mục trên menu của bạn sẽ được thêm phần CSS Classes, đây chính là phần để đặt “tên” cho stylesheet cho menu. Tôi làm ví dụ với nút Home của tôi, tôi đặt vào khung CSS Classeshom-button cho dễ theo dõi và quản lí, tên này bạn hoàn toàn có thể thay đổi nhé.

Chỉnh xong thì nhớ lưu lại nữa bạn nhé.

Viết CSS cho các lớp của menu

Giờ chúng ta sẽ đi biết stylesheet cho lớp hom-button bến trên. Việc này khá đơn giản, nếu bạn biết CSS thì chưa đến 30s là xong, còn nếu bạn chưa biết CSS thì hãy dựa vào khung sau của ChiaseWP để thực hiện nhé.

Các bạn mở file style.css của theme đang sử dụng và thêm đoạn code sau vào cuối:

.home-button {
	background-color: #00a6ad !important;
	color: #fff;
}

.home-button:hover {
	background-color: #f96e5b !important;
	color: #fff;
}

Các thuộc tính màu bên trên các bạn có thể chỉnh lại cho phù hợp. Trong đó .home-button sẽ áp dụng màu khi để bình thường và .home-button:hover khi rê chuột vào.

Tổng kết

Ngoài việc thêm màu này, cũng còn rất nhiều thứ hay ho nữa mà bạn có thể sử dụng CSS của menu, có thể là ẩn một menu khi màn hình quá bé, tự động đổi màu menu,… Nhưng bài viết này không đề cập đến hết được. Nếu các bạn có ý tưởng gì thì hãy cho tôi biết ở phần comment nhé. Chúc các bạn thành công.

Bài viết này tự động lấy từ nguồn chiasewp.com, nếu các bạn muốn xem bài viết gốc, hãy truy cập vào chiasewp.com để được hỗ trợ từ tác giả bài viết nhé

Trân trọng!

Leave a Reply

avatar
  Subscribe  
Notify of