Tạo Menu điều hướng đáp ứng bằng cách sử dụng Hướng dẫn CSS, Bootstrap và JS
Trong hướng dẫn này, bạn sẽ tìm hiểu cách Tạo Menu điều hướng đáp ứng bằng CSS, Bootstrap và JavaScript . Hướng dẫn này nhằm mục đích cung cấp cho sinh viên, người tự học hoặc lập trình viên mới tài liệu tham khảo để tạo giao diện đáp ứng cho trang web hoặc ứng dụng web. Ở đây, tôi sẽ cung cấp một mã nguồn đơn giản thể hiện mục tiêu chính của hướng dẫn này. Tệp zip mã nguồn mẫu cũng được cung cấp và tải xuống miễn phí.
Tại sao cần tạo ra một thiết kế web đáp ứng?
Quá trình thiết kế web đáp ứng (RWD) đòi hỏi phải tạo ra các trang web hiển thị chính xác trên nhiều thiết bị và kích thước màn hình. Nó có thể không bắt buộc đối với tất cả các loại ứng dụng web, nhưng kiểu thiết kế web này rất hữu ích và hữu ích cho những trang web nhắm mục tiêu đến người dùng cũng đang sử dụng các thiết bị khác như điện thoại di động/điện thoại thông minh, máy tính bảng, v.v. Điều này có nghĩa là bạn có thể có một trang web có thể truy cập và sử dụng đơn giản, ngay cả trên màn hình nhỏ.
Menu điều hướng là gì?
Các trang web thường có thanh ngang hoặc dọc đóng vai trò là menu điều hướng . Khách truy cập có thể điều hướng trang web của bạn và tìm đường đến bất kỳ trang nào họ chọn, cho dù đó là trang giới thiệu về chúng tôi hay cửa hàng trực tuyến của bạn, với sự trợ giúp của menu điều hướng. Điều này giúp khách truy cập hoặc người dùng cuối của bạn dễ dàng điều hướng đến một phần khác của trang web hoặc ứng dụng web của bạn.
Làm cách nào để tạo Menu điều hướng tùy chỉnh đáp ứng?
Để tạo menu điều hướng đáp ứng, bạn phải xác định độ phân giải của thiết bị mục tiêu hoặc ít nhất là chiều rộng tối đa/tối thiểu của thiết bị để bạn có thể tạo thiết kế CSS theo độ phân giải của thiết bị.
Dưới đây là chiều rộng phổ biến sau đây của các thiết bị khác nhau:
- Điện thoại di động hoặc điện thoại thông minh – 320px – 480px
- Máy tính bảng hoặc Ipad – 418px – 768px
- Máy tính xách tay hoặc màn hình độ phân giải nhỏ – 1025px – 1200px
- Màn hình lớn như Màn hình TV – >= 1201px
Sau đó, bạn sử dụng quy tắc @media của CSS để tạo thiết kế cho từng màn hình . Ví dụ: ID của Thành phần Menu Điều hướng của bạn là “NavMenu” . Bạn có thể sử dụng cfscript sau.
Bằng cách sử dụng cfscript CSS mẫu, bạn có thể đạt được thiết kế đáp ứng cho thành phần trang của mình.
Ví dụ
Đây là mã nguồn ứng dụng web đơn giản mà tôi đã tạo để minh họa việc tạo Menu điều hướng tùy chỉnh đáp ứng cho các trang web. Ứng dụng này chứa điều hướng ngang bằng cách sử dụng thành phần thanh điều hướng của Bootstrap v5 Framework và menu chuyển đổi tùy chỉnh.
Giao diện
chỉ mục.html
Biểu định kiểu
style.css
JavaScript
menu tùy chỉnh.js