Thêm hiệu ứng khi Hover vào Tiêu đề Menu Flatsome là bài chia sẻ với một số dòng CSS đơn giản, ai cũng làm được. Chỉ cần Copy & Paste và thưởng thức.
Hướng dẫn Thêm hiệu ứng khi Hover vào Tiêu đề Menu Flatsome
Để Thêm hiệu ứng khi Hover vào Tiêu đề Menu Flatsome bạn làm theo các bước dưới đây:
Bước 1: Truy cập Tùy biến (Customize) chọn Custom CSS
Đầu tiên, nếu bạn đang ở Trang Admin thì truy cập theo như hình Mô tả dưới đây
Trong trường hợp bạn không ở Trang Admin, thì chỉ cần truy cập Tùy Biến (Customize) là được.
Bước 2: Thêm CSS sau để có hiệu ứng viền ở dưới tràn sang hai bên khi hover (di chuột) vào Tiêu đề trên Menu
Bạn Click vào Icon Copy ở góc phải, sẽ tự động Sao chép vào bộ nhớ Clipboard máy tính của bạn, sau đó dán (Paste) vào phần Custom CSS bạn vừa truy cập ở trên.
/* Thêm hiệu ứng khi Hover vào Tiêu đề Menu Flatsome | Flatsome.IO */
.header-nav li a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 0;
background-color: #008756; /* Màu sắc đường kẻ */
transition: width 0.45s cubic-bezier(0.5, 0, 0.5, 1);
}
.header-nav li a:hover:after, .header-nav li.active a:after {
width: 100%;
}Bạn hãy chú ý ở
/* Màu sắc đường kẻ */là phần mình chú thích màu sắc của đường kẻ, hãy thay thế để phù hợp với nhu cầu của bạn.
Bước 3: Lưu lại và thưởng thức
Sau khi bạn Paste (Dán) mã CSS thì tiến hành lưu lại và thưởng thức.
Chú ý: Trong trường hợp bạn đang sử dụng Plugin Cache, hãy Clear Cache để có thể áp dụng CSS mới. Trong trường hợp trình duyệt lưu Cache của Website, hãy Clear cache của Trình duyệt để có thể áp dụng CSS mới.
Mẹo để tận dụng CSS hiệu ứng trên
Để tận dụng tối đa hiệu quả mang lại bạn chỉ cần nắm được một chút kỹ thuật CSS / HTML là được. Ví dụ như ở trên mình CSS cho header, nhưng thực tế bạn có thể sử dụng ở bất cứ đâu bạn muốn. Chỉ cần thay đổi 3 phần sau:
1: Phần tử cha : .header-nav
Trong chia sẻ của mình là phần tử Cha có tên là .header-nav tuy nhiên bạn chỉ cần thay .header-nav thành bất cứ gì bạn muốn.
2: Phần tử con: li
Trong code chia sẻ, để tránh áp dụng lỗi sang các mục khác, mình để phần tử con trung gian là thẻ li. Mục đích là sẽ không áp dụng cho các mục khác nếu cha của thẻ a không phải thẻ li, trong mã HTML của bạn có thể rút ngắn thẻ li bằng cách loại bỏ thẻ li nếu cần, hoặc cần trung gian thì bạn chỉ cần thay thế thẻ li bằng thẻ hoặc class bất kỳ.
3: Phần tử cháu chắt: a
Phần tử cháu chắt, hoặc phần tử đích trong bài chia sẻ là thẻ a, bạn có thể thay đổi thành thẻ bất kỳ hoặc class bất kỳ là có thể sử dụng.
Link bài đăng DEMO: https://www.flatsome.io/demos/demo-hieu-ung-khi-hover-vao-tieu-de-menu-flatsome-724.html
Tổng kết
Như vậy là chỉ với vài thao tác đơn giản, bạn đã có cho mình Hiệu ứng khi Hover vào Tiêu đề Menu Flatsome đẹp và hiệu quả.
Chúc bạn thành công.!
Thân chào và hẹn gặp lại trong các bài chia sẻ chất lượng mới của Flatsome Master trên Flatsome.IO
Trân trọng !
