SP hot
Tạo menu, dùng scroll to để active menu trong flatsome
Tạo menu và sử dụng scroll to để active menu trong Flatsome là một kỹ thuật quan trọng giúp cải thiện trải nghiệm người dùng trên website. Bài viết này sẽ hướng dẫn chi tiết cách thực hiện, từ việc tạo menu trong Flatsome đến việc tích hợp JavaScript để active menu khi cuộn trang.
Tạo Menu và Dùng Scroll To để Active Menu trong Flatsome
Việc điều hướng mượt mà và trực quan trên website là yếu tố then chốt để giữ chân người dùng. Trong Flatsome, việc kết hợp tạo menu với tính năng scroll to active menu không chỉ tăng tính thẩm mỹ mà còn giúp người dùng dễ dàng định vị vị trí hiện tại trên trang.
Tạo Menu trong Flatsome
– Đầu tiên, đăng nhập vào trang quản trị WordPress của bạn.
– Di chuyển đến mục Appearance -> Menus.
– Tạo một menu mới hoặc chỉnh sửa menu hiện có.
– Thêm các trang, bài viết, hoặc liên kết tùy chỉnh vào menu.
– Sắp xếp thứ tự các mục menu theo ý muốn.
– Lưu lại menu.
Thêm ID cho Section
Để scroll to hoạt động chính xác, mỗi section trên trang cần có một ID duy nhất. Trong Flatsome, bạn có thể thêm ID trực tiếp vào phần UX Builder.
– Chọn section bạn muốn thêm ID.
– Trong phần cài đặt section, tìm đến mục “Advanced”.
– Nhập ID mong muốn vào trường “Section ID”. Ví dụ: “about-us”, “services”, “contact”.
– Lưu lại thay đổi.
Tích Hợp JavaScript để Active Menu
Sau khi đã tạo menu và thêm ID cho các section, bước tiếp theo là tích hợp JavaScript để active menu khi cuộn trang. Bạn có thể thêm đoạn mã JavaScript sau vào file functions.php của theme hoặc sử dụng plugin để thêm custom JavaScript.
– Đoạn mã JavaScript mẫu:
“`javascript
jQuery(document).ready(function($) {
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
$(‘.menu-item a’).each(function() {
var currLink = $(this);
var refElement = $(currLink.attr(“href”));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$(‘.menu-item’).removeClass(“active”);
currLink.parent().addClass(“active”);
}
else {
currLink.parent().removeClass(“active”);
}
});
});
});
“`
– Giải thích đoạn mã:
– `jQuery(document).ready(function($) { … });`: Đảm bảo mã JavaScript chỉ chạy sau khi trang đã được tải hoàn toàn.
– `$(window).scroll(function() { … });`: Hàm này sẽ được thực thi mỗi khi người dùng cuộn trang.
– `var scrollPos = $(window).scrollTop();`: Lấy vị trí cuộn hiện tại của trang.
– `$(‘.menu-item a’).each(function() { … });`: Lặp qua từng liên kết trong menu.
– `var currLink = $(this);`: Lấy đối tượng jQuery của liên kết hiện tại.
– `var refElement = $(currLink.attr(“href”));`: Lấy đối tượng jQuery của section tương ứng với liên kết.
– `if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { … }`: Kiểm tra xem section có nằm trong vùng hiển thị hiện tại hay không.
– `$(‘.menu-item’).removeClass(“active”);`: Xóa class “active” khỏi tất cả các mục menu.
– `currLink.parent().addClass(“active”);`: Thêm class “active” vào mục menu hiện tại.
Thêm CSS để Highlight Menu Active
Để hiển thị hiệu ứng active menu, bạn cần thêm CSS vào file style.css của theme. Ví dụ:
“`css
.menu-item.active a {
color: #f00; /* Màu đỏ */
}
“`
– Đoạn mã CSS này sẽ đổi màu chữ của mục menu active thành màu đỏ. Bạn có thể tùy chỉnh màu sắc và kiểu dáng theo ý muốn.
Lưu ý khi sử dụng
– Đảm bảo rằng các ID của section và đường dẫn trong menu khớp nhau. Ví dụ: nếu ID của section là “about-us” thì đường dẫn trong menu phải là “#about-us”.
– Kiểm tra kỹ mã JavaScript và CSS để tránh xung đột với các mã khác trên website.
– Tùy chỉnh đoạn mã JavaScript và CSS để phù hợp với cấu trúc menu và thiết kế của website.
– Việc kết hợp Flatsome, UX Builder, JavaScript và CSS mang đến khả năng tùy chỉnh cao và trải nghiệm người dùng tốt hơn. Bằng cách làm theo hướng dẫn, bạn có thể dễ dàng tạo menu scroll to active, giúp website trở nên chuyên nghiệp và thu hút hơn.
