Top Menu là các mục trình đơn - Menu Item thường nằm ở phần đầu của trang web. Top Menu sẽ giúp mọi người thuận thiện trong việc truy cập nhanh vào các chuyên mục khác nhau trên trang web của bạn.

Cách tạo Top Menu cho trang web Joomla!

Sau đây là các bước một Top Menu đơn giản cho trang web Joomla!

  1. Tạo Top Menu
  2. Tạo Module để hiển thị Top Menu trên web
  3. Tạo mới hoặc sao chép, di chuyển các mục trình đơn vào Top Menu
  4. Thay đổi thứ tự vị trí của các mục trình đơn trên Top Menu

1

Tạo Top Menu

  • Bạn hãy tạo một trình đơn - Menu mới bằng cách truy cập vào trình đơn Menus -> Manage -> Add New Menu

Tạo một trình đơn - Menu mới

  • Trong trang tạo trình đơn mới, bạn hãy nhập tiêu đề cho trình đơn này trong mục TitleMenu Type, sau đó nhấn nút Save & Close để hoàn tất bước này.

Nhập tiêu đề cho trình đơn này trong mục Title và Menu Type

2

Tạo Module để hiển thị Top Menu trên web

  • Sau khi tạo xong Top Menu, bạn hãy nhấn vào nút Add a module for this menu

Tạo Module để hiển thị Top Menu trên web

  • Một cửa sổ Popup sẽ xuất hiện, bạn hãy thiết lập các thông số cho Module Top Menu này như sau

Thiết lập các thông số cho Module Top Menu

  1. Nhập tiêu đề cho Module này trong mục Title
  2. Trong mục Show Title bạn hãy chọn Hide để không hiển thị tên của Module trên web.
  3. Trong mục Position bạn hãy chọn vị trí muốn hiển thị Top Menu trên trang web của bạn.

Các Template thường thiết kế một vị trí dành riêng cho Top Menu, bạn hãy xem tài liệu hướng dẫn của template để biết. Trong trường hợp sử dụng Template mặc định của Joomla! là Protostar thì vị trí này tên là Navigation [position-1]

  • Tiếp theo bạn hãy chuyển sang phần Advanced và thiết lập Class Sufix như sau

Thiết lập Class Sufix trong Module Advanced

  1. Nhập  nav-pills trong mục Menu Class Sufix. Lưu ý là có một khoảng trắng phía trước nav-pills 
  2. Nhập _menu trong mục Module Class Sufix

Các Template thường thiết kế các Class dành riêng cho Top Menu, bạn hãy xem tài liệu hướng dẫn của template để biết. Trong trường hợp sử dụng Template mặc định của Joomla! là Protostar thì bạn thiết lập như trên.

  • Các thông số khác bạn hãy giữ nguyên như mặc định và nhấn nút Save & Close để hoàn tất phần tạo Module cho Top Menu.

3

Tạo mới hoặc sao chép, di chuyển các mục trình đơn vào Top Menu

Bây giờ bạn có thể nhấp chuột vào tên của Top Menu mở nó ra để tạo các mục trình đơn - Menu Item mới trong Top Menu.

Nếu muốn sao chép hoặc di chuyển các mục trình đơn từ Menu khác vào Top Menu bạn hãy nhấp chuột vào tên của Menu có các mục trình đơn mà bạn muốn sao chép hoặc di chuyển để mở nó ra và thực hiện như sau:

Nhấp chuột vào tên của Menu để mở nó ra

  1. Đánh dấu chọn các mục trình đơn mà bạn muốn sao chép hoặc di chuyển.
  2. Nhấn vào nút Batch

Dùng lệnh Batch để di chuyển các mục trình đơn từ Menu khác vào Top Menu

  1. Xuất hiện một của sổ Popup, bạn hãy nhấn vào mũi tên bên phải trong mục Don't move or copy
  2. Chọn Add to this menu bên dưới Top Menu

Chọn Menu để thực hiện lệnh Batch

  1. Nếu muốn sao chép các mục trình đơn thì bạn hãy chọn Copy. Còn nếu muốn di chuyển các mục trình đơn thì bạn hãy chọn Move.
  2. Sau khi chọn xong bạn hãy giữ nguyên các tùy chọn khác và nhấn nút Proccess

Chọn Move để di chuyển các mục trình đơn

  • Các mục trình đơn đã được di chuyển từ Main Menu sang Top Menu

Bây giờ bạn hãy quay lại trang web của bạn và nhấn phím F5 để cập nhật những thay đổi mới thực hiện. Bạn sẽ nhìn thấy một Top Menu với các mục trình đơn mà bạn vừa mới được tạo ra.

Top Menu với các mục trình đơn mà bạn vừa mới tạo ra

4

Thay đổi thứ tự vị trí của các mục trình đơn trên Top Menu

Nếu bạn muốn thay đổi vị trí của các mục trình đơn trên Top Menu thì hãy thực hiện như sau

  • Chọn Top Menu trong mục Select Menu

Chọn Top Menu trong mục Select Menu

  • Nhấn con trỏ chuột vào biểu tượng có hình 3 dấu chấm phía trước mục trình đơn muốn di chuyển sau đó kéo nó tới vị trị mới rồi thả nút chuột ra.

Thay đổi vị trí của các mục trình đơn trên Menu

Sau khi thực hiện xong bạn hãy quay lại trang web và nhấn phím F5 để cập nhật những thay đổi mới thực hiện. Bạn sẽ thấy các mục trình đơn trên Top Menu đã được sắp xếp lại.

Các mục trình đơn trên Top Menu đã được sắp xếp lại

Top Menu sẽ tự động thay đổi kiểu hiển thị trên các màn hình có kích thước khác nhau như máy vi tính, máy tính bảng, điện thoại,...

Xem hướng dẫn Cách tạo Dropdown Menu cho trang web Joomla!