Hôm nay mình sẽ chia sẻ với các bạn một plugin hoàn toàn miễn phí giúp bạn tạo megamenu vào trong trang web joomla của bạn. Để hiểu rõ hơn về megamenu , các bạn có thể xem hình minh họa bên dưới :

Bước 1 : Tải và Cài đặt MaxiMenu
Đầu tiên các bạn vào trang http://extensions.joomla.org , sau đó gõ MaxiMenu CK vào mục tìm kiếm, sau đó download module này về máy.

Sau đó vào phần admin, tìm đến Extension Manager để cài đặt module này.

Sau khi cài xong, các bạn vào menu Extensions > Module Manager, mở module Maximenu ra để tùy chỉnh.

Chọn vị trí hiển thị cho module này .

Dưới mục Basic Options, chọn Menu to render, trong trường hợp này chúng ta muốn Maximenu hiển thị Main Menu :

Cuối cùng, tại khu vực Menu Assignment , hãy đảm bảo là module này sẽ hiển thị trên hầu hết các trang.
Bước 2 : Cho menu hiển thị đa cấp.
Để hiển thị thì chúng ta sẽ phải thiết lập menu như hình bên dưới :

Bước 3 : Chèn thêm mô tả vào menu.
Maximenu cho phép bạn hiển thị một đoạn mô tả nhỏ về menu. Ví dụ mình có một menu với tiêu đề là “Joomla Books“, và mình muốn đặt mô tả là ” Teach yourself Joomla ” thì chúng ta sẽ làm như sau :
– Vào Menus > Main Menu , và tại mục Title các bạn gõ như sau : ” Joomla Books||Teach yourself Joomla ” , các bạn có thể xem hình minh họa ở bên dưới :

Bước 4 : Đưa một module vào bên trong một menu.
Một trong những tính năng thú vị mà MaxiMenu mang lại là cho phép bạn đặt một module vào bên trong menu. Các bạn có thể xem hình minh họa bên dưới :

Để làm điều này thì các bạn vào Extensions > Module Manager, click New, chọn Custom HTML, nhập với tiêu đề bất kì, và nội dung minh họa như sau :

– Bạn không cần phải ấn định vị trí tại mục Position, để nó không hiển thị ngoài trang web mà chỉ hiển thị ở menu.
– Sau khi tạo xong , các bạn vào Module Manager và tìm ID của module, trong ví dụ này, id là 97. Các bạn có thể xem hình minh họa bên dưới cho rõ hơn.

– Để hiển thị menu thì các bạn vào Menus > Main Menu, Chọn New để tạo một menu mới, tại Menu Item Type chọn Text Separator.
– Trong Menu Title, nhập ID của module mà bạn muốn hiển thị là xong.

Bước 7 : Tạo cột trong menu

Để tạo cột như hình bên trên thì tại Menu Title các bạn chèn thêm dòng [col=160] với 160 là chiều rộng của cột.

Để hiểu rõ hơn , các bạn có thể xem cách chèn trong menu như hình sau :

Có thể sẽ có thêm nhiều điều khó hiểu trong bài viết này, nếu các bạn có bất kì gặp rắc rối trong quá trình thực hiện thì có thể để lại lời nhắn dưới dạng comments. Mình sẽ giúp các bạn hoàn thành bài viết trên.