Học lập trình

Thêm Mega Drop Down Menu cho Joomla

Hôm nay mình sẽ chia sẻ với các bạn mega drop down menu cho joomla 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 :


mega drop down menu cho 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.
mega drop down menu cho joomla
Sau đó vào phần admin, tìm đến Extension Manager để cài đặt module này.
mega drop down menu cho joomla
Sau khi cài xong, các bạn vào menu Extensions > Module Manager, mở module Maximenu ra để tùy chỉnh.
mega drop down menu cho joomla
Chọn vị trí hiển thị cho module này .
mega drop down menu cho 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 :
mega drop down menu cho 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 :
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
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 :
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
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 :
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
Để 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 :
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
– 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.
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
– Để 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.
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
Bước 7 : Tạo cột trong menu
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
Để 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.
Hướng dẫn tạo mega drop-down menu trong Joomla 2.5
Để hiểu rõ hơn , các bạn có thể xem cách chèn trong menu như hình sau :
mega drop down menu cho 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.
Chúc các bạn thành công !

0 nhận xét trong bài "Thêm Mega Drop Down Menu cho Joomla"

Post a Comment