Tạo mega drop-down menu trong Joomla 2.5

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 :

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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.

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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 :

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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 :

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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 :

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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 :

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

Để 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 :

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

– 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.

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

– Để 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.

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

Để 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.

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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

Flyout Image Slider, joomla 2.5, joomla tips, joomla tutorial, thu thuat joomla

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.

 

 HỖ TRỢ TRỰC TUYẾN