Tăng tốc Menu Responsive Flatsome giảm 30KB và hàng trăm DOM
Có nên sử dụng menu mặc định của FLatsome không?
Flatsome làm menu tách làm 2 bản. 1 bản giành cho Mobile và 1 bản giành cho Desktop. Nhưng khi bạn tải trang thì tải cả 2 bản load cả css + html và js.
Ví dụ 1 cái menu:
Đây là menu desktop
Bạn vào xem source để kiểm tra:
Khi kéo xuống dưới sẽ có thêm menu của mobile
Khi load cái đám html + css này tầm 20KB
Còn JS của nó tầm 20KB
Chính vì nhược điểm này nên mình đã tìm cách cách tối ưu làm lại menu responsive cho Flatsome.
Menu này dùng ưu điểm rất nhẹ cả html +css +js hơn 10KB thôi.
Menu desktop mới
Menu mobile mới
Nếu bạn muốn làm menu như mình thì làm theo hướng dẫn sau nhé:
B1: Bạn tải template menu tại đây: GitHub – syrizaldev/vanilla-navbar-menu: Responsive Navbar Menu using HTML5, SCSS, and Vanilla JavaScript
B2: Mở file index.html sửa tên và đường dẫn phù hợp với web bạn
B3: Tạo 1 cái UX-BLOCK và dán html trên vào.
B4: Mở script lên copy hết vào và làm thẻ rồi lưu UX-block lại bạn đặt tên gì thì tùy. Ví dụ mình đặt tên là “Menunew” shortcode nó sẽ là
Block "menunew" not found
B5: copy css vào Tùy biến ▸ StyleCustom CSS: paste vào.
B6: Vào Tùy biến ▸ Header kéo 1 cái html cho vào buttom header.
B7: lưu lại và test.
Lưu ý tùy vào web bạn và sở thích CSS mà bạn chỉnh sửa lại cho phù hợp với web bạn nhé
Chúc các bạn thành công
