Giới thiệu về Menu #
Menu là khu vực điều hướng chính của website, thường nằm ở Header và Footer. Việc quản lý menu đúng cách giúp người dùng truy cập các trang quan trọng dễ dàng hơn. Trên một số website, menu còn được thiết kế dưới dạng Mega Menu để hiển thị nhiều nội dung hơn.
Vị trí menu trong website #
Mỗi website có thể có 1 hoặc nhiều vị trí menu:
- Menu chính (Header Menu): điều hướng chính ở đầu trang
- Menu phụ (Topbar hoặc Header Secondary): một số website có thêm menu nhỏ
- Menu Mobile: hiển thị riêng trên thiết bị di động
- Footer Menu: hiển thị ở cuối trang (Điều khoản – Chính sách – Liên hệ…)
Cách truy cập và chỉnh sửa menu #
Để chỉnh menu, vào:
Appearance → Menus
Các thao tác cơ bản #
- Chọn menu muốn chỉnh sửa
- Thêm trang vào menu
- Thay đổi thứ tự kéo-thả
- Tạo menu con (submenu)
- Đổi tên hiển thị của mục menu
Lưu ý: Tên trang và tên menu có thể khác nhau.
Thêm mục mới vào menu #
- Chọn trang hoặc liên kết cần thêm (Pages, Custom Links, Categories)
- Nhấn “Add to menu”
- Kéo-thả vào vị trí mong muốn
- Nhấn “Save Menu”
Tạo menu con (submenu) #
- Kéo mục cần làm submenu lệch sang phải
- Mục đó sẽ nằm dưới mục cha
Tip: Số cấp submenu quá sâu sẽ gây khó dùng trên mobile.
Tạo liên kết tùy chỉnh (Custom Links) #
Dùng khi cần tạo đường link:
- Link đến website khác
- Link đến form đăng ký
- Anchor (#id) để cuộn trang
Ví dụ Custom Links #
- URL: https://example.com/dang-ky
- Link Text: Đăng ký
Menu Mobile #
Nhiều website sử dụng menu mobile riêng để dễ tùy chỉnh giao diện và thứ tự mục.
Những đặc điểm của menu Mobile #
- Thường đơn giản hơn menu desktop
- Không hỗ trợ Mega Menu
- Hỗ trợ icon và toggle
Lưu ý khi chỉnh menu Mobile #
- Không để quá nhiều mục → cuộn quá dài
- Ưu tiên các mục quan trọng: Trang chủ, Giới thiệu, Khóa học, Tin tức…
- Kiểm tra hiển thị sau khi thay đổi
Mega Menu (JetMenu) #
Nhiều website sử dụng JetMenu để tạo Mega Menu cho header. Mega Menu cho phép hiển thị nhiều cột nội dung, banner, hình ảnh hoặc widget.
Cách chỉnh Mega Menu #
- Chọn mục menu muốn làm Mega Menu
- Nhấn biểu tượng JetMenu Settings
- Bật “Enable Mega Menu”
- Chọn “Edit Mega Menu Item Content” để chỉnh bằng Elementor
Bên trong Mega Menu bằng Elementor #
- Thêm các cột (Columns)
- Thêm Heading, Icon List, Buttons
- Thêm hình banner hoặc ảnh minh họa
- Điều chỉnh khoảng cách và layout
Cảnh báo: Không xoá các cột bố cục chính vì có thể làm hỏng toàn bộ Mega Menu.
Lỗi thường gặp khi chỉnh menu #
1. Thêm menu nhưng không hiển thị #
Do chưa chọn đúng vị trí menu (Menu Location).
2. Menu xuất hiện sai vị trí #
Do gán sai vị trí (ví dụ: gán menu Footer vào Header).
3. Mega Menu không hoạt động #
- Chưa bật JetMenu trên menu đó
- Chưa bật “Enable Mega Menu” cho từng mục
- Xung đột plugin hoặc CSS
4. Menu Mobile không cập nhật #
Do website dùng menu mobile riêng → cần chỉnh menu khác.
5. Menu bị vỡ layout #
- Do thêm quá nhiều mục
- Do icon hoặc nội dung Mega Menu quá lớn
Best Practices khi chỉnh menu #
- ✔ Giữ menu ngắn gọn (5–7 mục chính)
- ✔ Mục quan trọng đặt bên trái
- ✔ Không dùng quá nhiều submenu
- ✔ Kiểm tra menu Mobile sau khi chỉnh
- ✔ Mega Menu chỉ nên dùng cho desktop
Checklist cho người mới #
- ✔ Chọn đúng menu cần chỉnh
- ✔ Chọn đúng Menu Location
- ✔ Sử dụng Custom Links khi cần
- ✔ Kiểm tra hiển thị Mobile
- ✔ Kiểm tra Mega Menu sau khi chỉnh bằng Elementor
Bài 8 – Menu kết thúc.
