Bootstrap 5 menu hamburger codepen
|
Tôi đang cố gắng triển khai menu hamburger đáp ứng (Ba dòng xếp chồng lên nhau) trong tiêu đề “Xây dựng trang web danh mục đầu tư cá nhân” của mình. Tôi nhận thấy phương pháp 'có hướng dẫn hỗ trợ' của riêng mình không hoạt động như bình thường, thay vì hiển thị menu, một Để kiểm tra, tôi đã sao chép trực tiếp mã thanh điều hướng "ví dụ" từ trang web bootstrap và dán nó vào một chiếc bút trống. Điều này vẫn không làm việc Tôi đã tải cả jquery và bootstrap trong cài đặt javascript (theo thứ tự đó) Có ai khác gặp phải một vấn đề tương tự? . Tuy nhiên, bạn có thể tìm thấy mã ví dụ bootstrap mà tôi đã sử dụng làm thử nghiệm tại đây. Chúng tôi có 22 ví dụ về menu hamburger hàng đầu bằng CSS/HTML, Bootstrap và Codepen để bạn thiết lập một trang web và ứng dụng có cấu trúc và chức năng tốt Dù duyệt web hay trang di động, chúng ta đều có thể dễ dàng tìm thấy biểu tượng ba thanh thường nằm ở góc trên cùng bên trái của giao diện người dùng. Nó được gọi là “thực đơn bánh mì kẹp thịt” vì nó có hình thức giống như bánh mì kẹp, với thiết kế và hình thức siêu đơn giản Tuy nhiên, nó đã trở nên phổ biến và gây tranh cãi vì những lý do và kịch bản khác nhau. Để làm rõ điều đó, chúng tôi sẽ đưa ra những ưu và nhược điểm của menu hamburger, với các ví dụ về menu hamburger được đề xuất chủ yếu và các lựa chọn thay thế để cung cấp cho bạn các tiêu chí đánh giá để tìm ra giải pháp thiết kế phù hợp nhất Menu hamburger trên một trang web là gì?Trên web, menu hamburger là một biểu tượng mở ra để hiển thị menu điều hướng khi được nhấp vào. Loại thực đơn này là một chồng gồm ba đường kẻ ngang giống như một chiếc bánh hamburger - bánh bao trên, bánh bao và bánh bao dưới. Theo cách này, nó được gọi là nhiều thứ, chẳng hạn như “Hotdog”, “Side Menu”, “Pancake”, v.v. Nó không được sử dụng rộng rãi cho đến năm 2009 và đã bị bong tróc rất nhiều trong những năm qua • Nói chung là dễ nhận biết. Đây thực sự là một dấu hiệu được hiểu phổ biến, không cần dịch sang các ngôn ngữ khác • Nó cung cấp quyền truy cập điều hướng trực tiếp. Người dùng có thể đi đến phần cần thiết mà không cần nhấp vào màn hình hoặc cuộn qua tất cả nội dung • Nó làm cho điều hướng và giao diện người dùng rõ ràng hơn. Điều đó giúp người dùng tập trung vào các chức năng cốt lõi và bạn muốn họ xem, bằng cách hiển thị điều hướng chính và chuyển các tùy chọn phụ sang menu bên ẩn Menu Hamburger nhược điểm trên web• Nó không phải là một cú nhấp chuột và do đó làm cho tỷ lệ nhấp chuột tương đối thấp • Nó hơi khó khám phá và làm cho các tính năng bên trong nó có vẻ ít quan trọng hơn Menu hamburger nên ở bên trái hay bên phải?Trên thực tế, thật khó để đưa ra câu trả lời chắc chắn cho câu hỏi này, vì nó cần được điều chỉnh cho phù hợp với yêu cầu và mục đích thiết kế của bạn. Để kể tên một số, bạn nên đặt nó ở bên phải để dễ nhấp hơn do phần lớn mọi người thuận tay phải và góc trên cùng bên phải dễ tiếp cận hơn một chút so với góc bên trái Ngoài ra, bạn nên chuyển nó sang bên trái vì nó hoàn toàn tuân thủ Nguyên tắc thiết kế Material Design của Google (trong đó các biểu tượng ở bên phải là các hành động liên quan đến ứng dụng và biểu tượng menu sẽ mở menu mục bổ sung và chứa các mục menu như cài đặt, phản hồi . ) Menu hamburger trong Android hoặc iPhone là gì?Trong Android, menu hamburger là menu trượt xuất hiện trên màn hình khi bạn vuốt công cụ tìm từ cạnh phải hoặc trái của màn hình. Trong khi đó, nó hiển thị khi bạn nhấn vào nút 3 thanh trong thanh Tác vụ; • Nó có thể giúp sắp xếp mọi thứ gọn gàng • Nó dễ hiểu và không yêu cầu người dùng phải học lại từ đầu • Nó mang lại khả năng sử dụng tốt hơn và giúp người dùng đến đích mong muốn nhanh chóng và dễ dàng hơn Menu Hamburger nhược điểm trên điện thoại di độngNguyên mẫu nhanh hơn, thông minh hơn và dễ dàng hơn với Mockplus Bắt đầu MIỄN PHÍ • Nó có thể xung đột với các nút điều hướng trên iOS • Khó tiếp cận, đặc biệt khi nằm ở đầu màn hình 22 ví dụ thực đơn Hamburger hàng đầuĐối với một trang web hoặc Ứng dụng, chắc chắn việc tạo một menu đơn giản nhưng hữu ích và đầy đủ chức năng để điều hướng những khách truy cập sắp tới. Đừng lo lắng, chúng tôi đã chuẩn bị các ví dụ về menu hamburger đơn giản với khả năng sử dụng và hình ảnh động để cung cấp cho bạn tất cả các dịch vụ cần thiết Menu bánh mì kẹp thịt sử dụng CSSNhư chúng ta đã biết, menu hamburger có thể kích hoạt điều hướng ngăn kéo trượt, điều này rất phù hợp với thiết kế đáp ứng. Nếu bạn muốn tìm những cách mới để tạo hiệu ứng ba dòng đó thành một chữ X gọn gàng, hãy tham khảo menu hamburger CSS sau 1. Menu Mega Hamburger toàn màn hình với JS và CSSSau đây là menu hamburger Bootstrap được khuyên dùng nhiều và bạn có thể tìm thấy menu hamburger Bootstrap bên trái được sử dụng rộng rãi bên dưới 6. Mẫu menu điều hướng Bootstrap7. Bootstrap Responsive Menu với Submenu 9. Menu Điều hướng Bootstrap 10. Menu Thu gọn Bootstrap Không còn nghi ngờ gì nữa, menu bánh hamburger là sự chỉ trích một chiều của thành phần giao diện người dùng phổ biến, đã được tích hợp vào các trang web hoặc Ứng dụng của chúng tôi. Và có rất nhiều Ứng dụng hàng đầu sử dụng nó dưới hình thức này hay hình thức khác để tận dụng hết những lợi thế của nó và cố gắng hết sức để tránh những bất lợi nhằm đạt được mục tiêu cuối cùng của họ menu theo thẻNhư sau, nếu bạn có một số lượng nhỏ các phần riêng biệt trong trang web hoặc Ứng dụng của mình và muốn đảm bảo rằng người dùng có thể nhanh chóng chuyển đổi giữa các phần khác nhau, thì menu theo thẻ sẽ là giải pháp tốt nhất của bạn. Dưới đây là một ví dụ làm bằng Mockplus để các bạn tham khảo Khi có hơn 5 thẻ trong menu, bạn có thể đặt các thẻ khác nhiều hơn 4 thẻ vào tùy chọn “Thêm” dưới dạng menu thả xuống. Dưới đây là một ví dụ về Mockplus để bạn tham khảo Menu hamburger nổi và các menu có thể vừa với chiều rộng của màn hình Nhân tiện, ngoại trừ công cụ tạo mẫu nhanh, Mockplus, một công cụ chuyển giao và cộng tác thiết kế trực tuyến tất cả trong một khác, Mockplus iDoc, cũng là một công cụ thiết kế tốt để nhóm sản phẩm của bạn nhận xét và thảo luận về thiết kế menu/điều hướng, tạo nguyên mẫu Mockplus iDoc. Công cụ cộng tác thiết kế trực tuyến & bàn giao thiết kếiDoc là công cụ cộng tác thiết kế trực tuyến dành cho các nhà thiết kế giao diện người dùng và nhà phát triển giao diện người dùng. Nó kết nối thiết kế của bạn…ngu ngốc. mockplus. com Phần kết luậnNhìn chung, menu hamburger không tốt cũng không xấu, và bạn cần đảm bảo rằng đó là quyết định đúng đắn cho thiết kế của bạn. Ngoài ra, bạn có thể chạy A/B hoặc thử nghiệm người dùng để dự đoán hành vi của người dùng và xem xét/áp dụng các giải pháp thay thế để giúp khách truy cập đạt được hiệu quả và tốc độ. Hy vọng các ví dụ về menu bánh hamburger ở trên sẽ truyền cảm hứng cho bạn |
