Thiết lập Mega Menu

Có lẽ bạn đã từng thấy các menu được thiết kế riêng không theo định dạng mặc định như hình ảnh dưới đây rồi.

Trong bài viết này SiteMeta sẽ hướng dẫn bạn tạo một Mega Menu cho riêng mình.

I. Mega Menu là gì?

Cũng là một dạng menu nhưng khi bạn di chuột hoặc click vào sẽ hiển thị một menu được thiết kế riêng theo ý tưởng của bạn mà không phải theo thiết kế mặc định của menu dưới đây

Mega Menu giúp bạn thể hiện các dịch vụ / sản phẩm một cách rõ ràng và bắt mắt hơn. Hơn nữa cũng có thể phục vụ cho chiến dịch marketing của bạn.

II. Cách tạo Mega Menu trên SiteMeta

Là một chức năng mới được cập nhật vào ngày 11/12/2022 với sự kết hợp của Hàng đã lưu và Shortcode trong Sitemeta Builder > Menu.

• Đầu tiên chúng ta cần tạo một hàng mới chứa các hạng mục muốn hiển thị trong Mega Menu, gắn Class sitemeta-mega-menu vào hàng và lưu nó lại trong Hàng đã lưu.
• Tiếp theo chúng ta sẽ tạo một Menu dạng Shortcode và lấy Shortcode ID của hàng vừa lưu dán vào
• Cuối cùng, chỉnh sửa style cho phù hợp

1. Tạo Hàng chứa Mega Menu

Bạn truy cập vào quản trị website và đi đến SiteMeta Builder > Hàng đã lưu. Click vào Add New / tạo mới

Nhập tên hàng bạn muốn ghi nhớ, sau đó click Thêm Saved Row

Tiếp theo bạn Mở SiteMeta Builder và tự thiết kế cho mình một Mega Menu hoàn hảo theo ý tưởng riêng.

Khi bạn đã thiết kế xong thì bạn truy cập vào tab Nâng cao của Hàng bằng cách click vào icon list ở góc trên bên phải, click phải chuột vào Hàng và chọn Open Settings.

Sau đó chọn Tab Nâng cao và dán Class có tên là sitemeta-mega-menu. Lưu lại để hoàng tất.

Lưu ý: Với bất kỳ thiết kế nào, bạn cũng sẽ cần chỉnh sửa hiển thị cho các thiết bị Responsive như máy tính bảng, điện thoại di động.

Hoàn tất thiết kế của bạn bằng cách click vào Xong > Đăng.

Đây là các hạng mục mà SiteMeta đã thiết kế để hiển thị trên Mega Menu. Trong ví dụ dưới đây, SiteMeta đã tạo ra 3 column (cột), mỗi cột sẽ tạo thêm các Module Call to Action chứa hình ảnh bên trái, tiêu đề và mô tả bên phải. Nhớ gắn liên kết cho mỗi Module nhé!

Sau khi thiết kế xong Mega Menu theo ý tưởng riêng của bạn thì tiếp theo chúng ta sẽ gắn Mega Menu này vào Menu mong muốn hiển thị.

Ở ví dụ này, SiteMeta đã gắn Mega Menu vừa thiết kế vào Menu có tên là Dịch vụ Server.

2. Đặt Mega Menu đã thiết kế vào Menu mong muốn

Mỗi Hàng đã lưu sẽ có một Shortcode ID riêng. Để lấy được Shortcode ID, bạn truy cập SiteMeta Builder > Hàng đã lưu. Tìm đến hàng bạn vừa tạo và bạn sẽ thấy Shortcode nằm ở bên phải nó.

Bạn copy Shortcode ID đó và truy cập SiteMeta Builder > Menu. Và click vào danh mục Shortcode thuộc nhóm Thêm liên kết. Sau đó nhập tên Shortcode để dễ nhớ hơn và dán Shortcode ID vừa copy. Cuối cùng, Click Add to Menu.

Khi bạn thêm một menu bất kỳ vào thì Menu đó sẽ hiển thị ở dưới cùng của bảng cấu trúc Menu. Tiếp theo, di chuyển Mega Menu Dịch vụ Server lên bên dưới menu Dịch vụ Server và nhớ rằng cho Mega Menu này nằm thụt vào so với Menu Dịch vụ Server nhé.

Cuối cùng, lưu menu lại và tận hưởng thành quả.

3. Chỉnh sửa style

Khi thiết kế mới bất kỳ hạng mục nào thì bạn sẽ cần kiểm tra hạng mục đó và xem xét nó đã đẹp và dễ nhìn hay chưa. Nếu chưa thì cần chỉnh sửa lại Style cho nó.

Với Mega Menu cũng vậy, sau khi bạn kiểm tra kết quả nếu chưa hài lòng bởi Style thì bạn có thể chỉnh lại theo gợi ý sau:

• Nếu bạn thấy các hạng mục thuộc Mega Menu đã tạo trong Hàng đã lưu chưa đẹp thì bạn truy cập vào SiteMeta Builder > Hàng đã lưu, tìm đến Mega Menu đã tạo. Sau đó click vào SiteMeta Builder của hàng đã tạo (Mega Menu) đó và bắt đầu chỉnh lại Style cho phù hợp.
• Nếu bạn thấy giao diện Menu chưa đẹp thì truy cập vào SiteMeta Builder > Themer Layout và chỉnh lại style cho Header chứa Menu của bạn.

III. Bạn cần trợ giúp?

Trong quá trình thực hiện theo hướng dẫn này nếu bạn cần trợ giúp, xin vui lòng liên hệ cho SiteMeta bằng cách truy cập vào sitemeta.net và click vào nút tương tác bất kỳ.