[Contao] Xây dựng Respontive Menu (Navigation Menu) cho Contao 3.x

Hôm vừa rồi thì mình phải xây dựng lại một Website sử dụng Contao 3.x (Tú đang dùng 3.2.10) trong đó cũng cần làm lại Respontive Menu cho Contao. Với Contao thì chỉ việc tạo ra Module “Menu Quick Navigation” là có thể sở hữu 1 Menu hỗ trợ respontive cho người dùng. Nhưng với menu có nhiều nội dung thì người dùng sẽ khó chọn bởi vậy chúng ta cần một plugin khác tốt hơn để làm việc này.

Trong những cái mình làm thì dk_mmenu là plugin thấy ổn nhất. Tuy nhiên viết bài này vì trang hướng dẫn của tác giả không vào được, bởi vậy ngồi mò mẫm code cả 1 buổi mới tìm ra cách cài đặt sử dụng.

Để sử dụng dk_mmenu chúng ta cần làm 2 việc.

  • Tạo ra một Module với Type là mmenu bạn vừa cài đặt
  • Tạo thêm một nút bấm, để gọi mmenu hoạt động.

dk_mmenu thì xây dựng dựa trên http://mmenu.frebsite.nl/ bởi vậy demo các bạn xem trên đó có đủ luôn (hoặc bấm vào đây)

Bước 1: Cài đặt Mmenu (dk_menu)

Bước 2: Tạo Module với Tpye sử dụng Mmenu

Mẫu cấu hình Module mmenu (Thử hết đống này là hiểu tính năng, Tú không mô tả lại nữa)

Setting Mmenu

Setting Mmenu

Bước 3: Bật Jquerry trong Layout

Với mmenu thì tác giả gọi thêm các js ngay bên trong Module thay vì việc đẩy cho phần layout. Do đó chỉ chú ý là các bạn phải bật jquery trong Layout là sử dụng được. (hầu hết các extension của Contao thì lại phải gọi thêm js ở trong Layout, mmenu thì KHÔNG)

Bật Jquery Contao

Bật Jquery Contao

Bước 4: Tiếp đến tạo thêm nút bấm để mmenu hoạt động.

Tạo thêm một Module với kiểu là Custom HTML


<div class="dk_navigation grid offset5">
<a class="dk_mobilmenu" href="#mmenu">
<span>≡</span>
Menü
</a>
</div>

Bước 5: Quay trở lại layout, thêm 2 module bạn vừa tạo ở trên.

Thêm Module vào Layout, phải thêm đủ 2 Module thì mmenu mới hoạt động

Thêm Module vào Layout, phải thêm đủ 2 Module thì mmenu mới hoạt động

Kết thúc !

Hướng dẫn chắc toàn tiếng Đức, đây cũng là bải để Tú nhớ khi phải làm lại content cho contao. Hy vọng nó giúp ích cho bạn đỡ mất nhiều thời gian như Tú. Comment nếu bạn gặp vấn đề với plugin này, Tú hy vọng có thể giúp được bạn.

Nhận thêm bí quyết mới

Đăng ký nhận bản tin qua email, bạn sẽ không bao giờ bỏ lỡ những chia sẻ tuyệt vời từ Tú Cao.

Leave a Reply

Thư điện tử của bạn sẽ không được hiện thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký để nhận
Tuyệt chiêu Marketing

Khi nào có bí quyết mới, bạn luôn là người biết đầu tiên.