Hướng dẫn tạo Mega Menu WordPress bằng plugin

Mega Menu đang là xu hướng và lựa chọn tất yếu hiện nay trong các trang web cả ở Việt Nam và nước ngoài. Trong WordPress có một kỹ thuật gọi là walker. Cho phép chỉnh sử menu bằng code HTML, nó khá là phức tạp. Tại sao chúng ta không sử dụng Plugin Mega Menu, một cách đơn giản hơn để tiếp cận và sử dụng Mega Menu. Trong bài viết này tôi sẽ hướng dẫn các bạn tạo Mega Menu bằng Plugin miễn phí có tên là Max Mega Menu

Demo:

Các tính năng mà plugin này mang lại là:

• Plugin này cho phép bạn tuỳ biến menu theo ý thích
• Đặt các widget vào menu, bất kỳ widget nào bạn đã cài vào website
• Cho phép kéo thả các widget
• Mục Mega menu có 6 cột
• Menu Icons
• Kích hoạt hiệu ứng bằng cách Hover hoặc Click
• Hiệu ứng hoạt cảnh xuất hiện: Fade và Slide
• Tương thích với màn hình di động
• Có 3 kiểu mũi tên dropdown
• Tuỳ chỉnh cấu hình trong Appearance
• Làm việc với nhiều Menu
• Vẫn hoạt động khi jquery bị vô hiệu hoá
• Responsive
• Retina Ready
• An toàn khi gỡ cài đặt, khi gỡ cài đặt menu của bạn sẽ trở về ban giao diện ban đầu
• Hoạt động trên IE9+, FireFox, Opera, Safari & Chrome

Chưa được test trên IE8 trở xuống

Một số tính năng khác:

• Plugin này sẽ không nhận style từ menu cũ của bạn, bạn có thể tạo ra giao diện mới từ Menu Themes
• Menu CSS tự động phân tích SCSS
• Max Mega Menu tương thích với các Widget và plugin Menu Output cache ( https://wordpress

org/plugins/widget-output-cache/ ) cũng giống như WP Super Cache

• Các widget được đặt trong Mega Menu cũng được lưu giống như các widget khác trong Appearance / Widgets

Các yêu cầu của plugin:
– Website WordPress của bạn phải là bản 3.8 trở lên.
– Plugin này chỉ có thể áp dụng với những Menu đã set vị trí trong Menu Settings / Theme locations , chẳng hạn như Primary Menu, Footer Menu,…

Bước 1: Cài đặt

Dĩ nhiên, phần đâu tiên là bạn phải cài đặt plugin Mega Menu. Chọn Plugins / Add new nhập vào ô tìm kiếm Mega Menu, bạn sẽ thấy nhiều plugin cho phép làm đều này. Tôi chọn cài đặt plugin Max Mega Menu, đơn giản vì nó miễn phí và dễ sử dụng. Sau khi cài đặt xong ta chọn Active plugin.

Bước 2: Kích hoạt tính năng trên Main Menu

Tiếp theo, ta vào mục Appearance / Menus

Ở phần này các bạn làm theo các bước sau:
1. Hãy chắc chắn rằng menu bạn đã được set vị trí trong phần Menu Settings / Theme locations, vì nếu không thì mục 2 không được hiển thị các tuỳ chọn.
2. Mục này bạn sẽ chọn Enable tính năng Mega Menu trong menu.
Các tuỳ chọn tiếp theo là :

• Event: Lựa chọn sự kiện hiển thị menu con (Mega Menu)
  • Hover: Khi bạn đưa chuột qua
  • Click: Khi bạn click chuột
• Effect: Hiệu ứng hiển thị
  • None: Không dùng hiệu ứng
  • Fade: làm mờ khi xuất hiện và khi biến mất
  • Slide: Hiệu ứng trượt
• Theme: Giao diện của Main Menu. Mục này tôi sẽ hướng dẫn các bạn ở bước tiếp theo.

3. Tuỳ biến menu
Mục này chúng ta sẽ lưu ý đến phần Mega Menu Options. Đây chính là bước quan trọng nhất.
Configure Panel Widgets for |Page|

Đây là phần các bạn tuỳ biến các widget trên Mega Menu, các bạn có thể đặt bất kỳ webget nào mà bạn đã cài đặt vào site của bạn. Bạn có thể thay đổi kích thước của widget bằng hai mũi tên trái và phải cạnh tên widget. Tổng kích thước chiều ngang (độ rộng) bằng chiều rộng của Main Menu

Các tuỳ chọn tiếp theo là:

• Sub Menu Type: Kiểu của menu con
  • Flyout Menu: Tên mặc định của bên tạo plugin (phần này ta chọn Mega Menu Panel)
  • Mega Menu Panel: Hiển thị Mega menu
• Sub Menu Position: Hiển thị vị trí của menu con, bên trái hoặc bên phải. Tuỳ vào ý thích của bạn.
• Menu Icon: Icon của mục menu này. Bạn có thể chọn tuỳ ý theo các lựa chọn có sẵn.

Sau khi chọn những tuỳ chọn phù hợp, hãy Save Menu để áp dụng thay đổi.

Bước 3: Tạo theme Mega Menu

Khi đã hoàn thành việc hiển thị Mega Menu, chúng ta mới bắt đầu tuỳ biến giao diện menu.
Appearance / Menu Themes

Nếu bạn đã ưng ý với cấu hình ban đầu của Mega Menu và muốn tạo theme một giao diện khác thì click vào Create a new theme, nếu không bạn vẫn có thể chỉnh sửa trên theme mặc định có tên là Default.
Các mục cần chú ý:

• Theme Title: Tên Theme, có thể đổi tên tuỳ ý
• Main Font: Kiểu font chữ của menu
• Responsive Breakpoint: Nhận diện hiển thị trên di động bằng chiều rộng màn hình
• Menu Background: Màu nền background của Main Menu
• Menu Padding: Padding main menu
• Rounded Corners: Bo góc menu
• Panel Background: màu nền của sub menu
• Panel Width: Độ rộng sub menu (Nên để 100%)
• Widget Padding: Padding các widget bên trong mega menu

Tuỳ chọn cuối cùng trong theme mega menu đó là Custom Styling nếu bạn biết chút ít về CSS hoặc là code thì không cần phải giải thích nhiều về mục này nữa rồi.
Đây là mục chỉnh sửa CSS tuỳ biến, được ghi đè lên các cấu hình phía trên mà ta đã chọn. Nếu bạn không ưng ý với các tuỳ chọn có sẵn, bạn có thể tự CSS tại mục này.

Sau khi có các lựa chọn phù hợp với ý thích của bạn, đừng quên click Save Changes ở cuối trang nhé.
Cuối cùng là trở lại mục Appearance / Menus. Trong Mega Menu Settings hãy chọn theme Mega Menu mà bạn đã tuỳ biến và Save Menu
Chúc bạn có một cái Mega Menu đẹp trên website của bạn.