Nút menu là một thành phần bên trong Thanh điều hướng tổ chức các liên kết điều hướng khi có không gian ngang hạn chế, như trên thiết bị di động. Đôi khi nó được gọi là “thực đơn hamburger. "
Nút menu và chức năng của nó được tích hợp vào phần tử Thanh điều hướng và có thể được truy cập cũng như định cấu hình theo một số cách. Chúng tôi sẽ đề cập đến bốn khía cạnh của nút menu
Kích hoạt menu
Theo mặc định, nút menu điều hướng xuất hiện trên điểm ngắt của máy tính bảng trở xuống. Bạn có thể chuyển sang chế độ xem trước và thấy menu xuất hiện trong thanh điều hướng của mình khi bạn chuyển sang các thiết bị này. Nhấp vào nút menu đó sẽ mở rộng menu điều hướng và nhấp lại vào nút sẽ thu gọn menu điều hướng
Trên điểm ngắt màn hình nền, bạn có thể thấy rằng các liên kết điều hướng được lồng bên trong thành phần menu điều hướng. Menu điều hướng này là phần tử tương tự hiển thị khi nhấp vào nút menu—nó chỉ hiển thị các liên kết điều hướng trong một danh sách dọc
Kích hoạt menu trong Designer
Bạn có thể mở menu điều hướng trong Trình thiết kế theo các bước sau
- Chọn Thanh điều hướng hoặc bất kỳ thành phần nào bên trong nó
- Mở bảng Cài đặt > Cài đặt thanh điều hướng
- Chọn Hiển thị menu
khả năng hiển thị của thiết bị
Theo mặc định, nút menu Thanh điều hướng xuất hiện trong điểm dừng của máy tính bảng, nhưng điều này có thể thay đổi được. Nút có thể được hiển thị trên tất cả các điểm dừng hoặc không có gì cả. Làm theo các bước sau để thay đổi chế độ hiển thị
- Chọn Thanh điều hướng hoặc bất kỳ thành phần nào bên trong nó
- Mở bảng Cài đặt > Cài đặt thanh điều hướng
- Sử dụng thanh trượt tùy chọn thiết bị để chọn nơi nút Menu xuất hiện đầu tiên
Hình ảnh động của menu
Có ba loại hoạt ảnh hiển thị có thể được sử dụng cho menu
- thả xuống
- qua bên phải
- Qua trái
Bạn có thể chọn hình động hiển thị trong bảng Cài đặt
thả xuống
Đây là loại menu mặc định. Khi nhấp vào nút menu, menu điều hướng sẽ thả xuống từ Thanh điều hướng. Theo mặc định, menu điều hướng sẽ chiếm toàn bộ chiều rộng của cửa sổ trình duyệt
qua phải
Khi loại menu này được chọn, menu điều hướng sẽ di chuyển từ phía bên phải của màn hình khi nhấp vào nút menu. Lưu ý rằng loại menu này sẽ chiếm toàn bộ chiều cao của cửa sổ trình duyệt
Qua trái
Loại menu này giống như Over Right, ngoại trừ menu điều hướng sẽ di chuyển từ bên trái. Loại menu này cũng sẽ chiếm toàn bộ chiều cao của cửa sổ trình duyệt
Menu nới lỏng và chuyển đổi
Đối với tất cả các loại menu này, bạn có thể kiểm soát loại đường cong nới lỏng được sử dụng để tạo hiệu ứng chuyển tiếp mở và đóng. Bạn cũng có thể điều chỉnh thời lượng của quá trình chuyển đổi
Tạo kiểu cho nút menu
Bạn có thể tạo kiểu cho bất kỳ khía cạnh nào của Thanh điều hướng hoặc menu điều hướng. Vì các kiểu xếp tầng xuống từ các điểm ngắt lớn hơn, hãy chọn điểm ngắt cao nhất mà bạn đã bật nút menu Thanh điều hướng rồi thêm kiểu
Tạo kiểu cho nút
Ví dụ: khi ở chế độ xem máy tính bảng, bạn có thể chọn nút menu và đặt màu nền của nút
- Chọn nút trình đơn
- Mở bảng Kiểu > Hình nền
- Nhấp vào mẫu màu để mở bộ chọn màu và chọn một màu
Tạo kiểu cho biểu tượng
Bạn cũng có thể tạo kiểu cho biểu tượng menu bằng cài đặt kiểu chữ. Biểu tượng sẽ kế thừa các kiểu chữ này từ phần tử cha của nó, nút menu
Để thay đổi kích thước của biểu tượng menu
- Chọn nút trình đơn
- Mở bảng Kiểu > Kiểu chữ
- Thay đổi Kích thước để làm cho biểu tượng menu lớn hơn hoặc nhỏ hơn
Bạn cũng có thể thay đổi màu của biểu tượng menu bằng cách điều chỉnh màu phông chữ
Để thay đổi màu của biểu tượng menu
- Chọn nút trình đơn
- Mở bảng Kiểu > Kiểu chữ
- Nhấp vào mẫu màu để mở bộ chọn màu và chọn một màu
Tạo kiểu cho trạng thái mở
Giao diện của nút menu có thể được tùy chỉnh dựa trên trạng thái của menu [Hiển thị hoặc Ẩn]. Khi bạn đã bật menu Hiển thị và thực hiện thay đổi kiểu cho nút menu HOẶC thêm một lớp vào đó, một lớp “Mở” đặc biệt sẽ tự động được thêm vào trường bộ chọn
Tương tự như cách hoạt động của kiểu dáng ở trạng thái mặc định, bạn có thể áp dụng kiểu nền và kiểu chữ trên nút menu để thay đổi màu nền và màu biểu tượng