Bài viết này sẽ chia sẻ cách để tạo hiệu ứng khi di trỏ chuột vào menu ( Hiệu Ứng Hover cho Nav Menu ) để tăng phần sinh động và cũng để user biết được rằng mình đã di chuột vào menu này.
Để thực hiện theo bài hướng dẫn này Bricks theme của bạn cần có plugin Advanced Themer for Bricks. Advanced Themer for Bricks là gì bạn có thể tìm hiểu thêm tại bài viết ề Advanced Themer for Bricksk nhé
Mình đã thử pase đoạn code này vào file child.css rồi áp dụng Attributes cho phần tử nhưng nó sảy ra hiện tượng tự tạo ra thêm menu nữa và căn theo hàng dọc, phá vỡ đi giao diện ban đầu. Mình đã test thử bằng cách sử dụng plugin Advanced Themer for Bricks để tạo một class và cho phần tử element nav menu áp dụng class này thì mọi thứ đã hoạt động theo đúng ý.
Bạn chỉ cần tạo một class bằng Advanced Themer for Bricks sau đó vào phần CSS pase đoạn code dưới đây là menu của bạn đã có hiệu ứng di chuột
%root% {
display: flex; /* Sử dụng flexbox để giữ hàng ngang */
justify-content: flex-start; /* Căn chỉnh các mục về phía bên trái */
padding: 0; /* Xóa khoảng cách padding mặc định */
margin: 0; /* Xóa khoảng cách margin mặc định */
}
%root% li {
list-style: none; /* Loại bỏ dấu chấm của danh sách */
}
%root% a {
color: white; /* Màu chữ bình thường */
padding: 10px 15px; /* Thêm khoảng cách quanh chữ */
text-decoration: none; /* Loại bỏ gạch chân */
transition: color 0.3s; /* Thêm hiệu ứng chuyển đổi */
}
%root% a:hover {
color: red; /* Màu chữ khi di chuột vào */
}Trong Bricks thì %root% nghĩa là chính phẩn tử được app dụng class VD áp dụng cho Title thì%root%chính là Title, các class %root% sẽ trở thành Title a
