Thiết kế menu thả xuống: 40 Ví dụ & Thực tiễn hàng đầu vào năm 2020 – hộp menu thả xuống

40 ví dụ về thiết kế menu thả xuống có thể di chuột và có thể nhấp và các phương pháp hay nhất vào năm 2020, mà bạn có thể sao chép để thiết kế và cải thiện trang web / ứng dụng của mình một cách dễ dàng.

Bạn đang xem : hộp trình đơn thả xuống

Một trình đơn thả xuống rõ ràng và có cấu trúc tốt giúp điều hướng khách truy cập qua trang web / ứng dụng, thu hẹp lựa chọn của họ và tiết kiệm không gian màn hình một cách dễ dàng. Vì vậy, nó được sử dụng rộng rãi cho các thanh điều hướng trang web / ứng dụng, thanh tìm kiếm hoặc thanh tab để nâng cao trải nghiệm người dùng.

Tuy nhiên, đối với các nhà thiết kế UI / UX, thách thức thực sự là làm thế nào để giữ cho chúng đơn giản, hiệu quả và đủ hấp dẫn.

Trong bài viết này, Mockplus đã tổng hợp 40 người có thể nhấp và di chuột hàng đầu. các ví dụ về thiết kế menu thả xuống và các phương pháp hay nhất để bạn lấy cảm hứng và tạo các menu thả xuống đặc biệt cho các trang web / ứng dụng của mình một cách dễ dàng.

Nhiều thiết kế menu thả xuống cho thanh điều hướng, thanh tìm kiếm, thanh tab và thậm chí cả các nút hoặc biểu tượng nổi cũng được đưa vào để bạn tùy hứng.

30 ví dụ về thiết kế menu thả xuống tốt nhất cho cảm hứng của bạn

1. Converse

Converse là một trang web thời trang trực tuyến bán giày, quần áo và bánh răng. Menu điều hướng thả xuống có thể nhấp của nó có menu con thả xuống 2 cột tuyệt vời để hướng dẫn người dùng. Các hiệu ứng di chuột phong phú được cung cấp để giúp người dùng dễ dàng chọn các tùy chọn menu mong muốn.

2. Santa Cruz

Santa Cruz là một cửa hàng bán xe đạp trực tuyến có danh sách thả xuống khá sáng tạo menu điều hướng hiển thị các loại xe đạp khác nhau với hình ảnh. Khách truy cập trang web có thể dễ dàng có một cái nhìn sâu sắc về những gì họ sẽ thấy trong cửa hàng này. Đó là một ý tưởng hay cho tất cả các trang web mua sắm trực tuyến làm theo để cải thiện ux.

3. Dầu Helias

Helias Oils là một trang web về tinh dầu nguyên chất cũng có mức giảm hấp dẫn- menu điều hướng xuống được ghép nối với hình ảnh sản phẩm. Nó cũng sử dụng các hiệu ứng di chuột đẹp mắt và chuyển đổi gợn sóng để thu hút người dùng.

4. Trình đơn thả xuống CSS3 xoay vòng

Trình đơn thả xuống CSS3 xoay vòng là một trình đơn thả xuống duy nhất dễ dàng tạo mẫu bằng CSS. Khi bạn di chuột vào các mục menu phía trên, các mục menu phụ sẽ xuất hiện với hiệu ứng xoáy mát. Nếu bạn quan tâm, chỉ cần nhấp vào liên kết hướng dẫn để đọc thêm.

5. Lion Burger

Lion Burger có menu thả xuống giống như nút rất bắt mắt quán ba. Các mục Submenu được tạo với các hiệu ứng di chuột đặc biệt. Hơn nữa, các mục nút màu đỏ và văn bản màu trắng thực sự hoạt động hoàn hảo trên nền trang tối.

6. Trình đơn hộp thả xuống của CSS3 Slide

Trình đơn Hộp thả xuống Trang trình bày CSS3 là một trình đơn tuyệt vời khác- mẫu menu điều hướng xuống có hiệu ứng trượt rất thú vị. Khi di chuột vào một mục menu, một hình ảnh thu nhỏ sẽ bật lên và các menu con liên quan sẽ trượt sang phải / trái một cách trơn tru. Bạn cũng có thể nhấp vào liên kết dưới cùng để xem hướng dẫn CSS.

7. Trình đơn điều hướng thả xuống đáp ứng

Menu điều hướng thả xuống đáp ứng đến từ mẫu trang web công thức Bootstrap . Menu thả xuống của nó bao gồm ba menu con cột để giới thiệu các danh mục công thức. Một thanh trượt hình ảnh đáng kể ở phía bên phải cũng giúp người dùng chọn đúng công thức một cách nhanh chóng.

8. Trình đơn thả xuống Bryan

Trình đơn thả xuống Bryan là một trình đơn thả xuống nhiều cấp thông minh. Người dùng có thể dễ dàng di chuột vào một mục phía trên để hiển thị tất cả các mục menu con theo từng bước. Nó là hoàn hảo cho các trang web có hệ thống điều hướng rất phức tạp.

9. PopSockets

PopSockets là một trang web mua sắm điện thoại trực tuyến tuyệt đẹp và trình đơn điều hướng thả xuống của nó sử dụng những hình ảnh minh họa đầy màu sắc để giới thiệu sản phẩm của mình, tạo nên một sức hấp dẫn thị giác ấn tượng.

10. Khám phá trình đơn thả xuống tối thiểu

Khám phá menu thả xuống tối thiểu là một công cụ thả xuống thú vị, tối giản- menu điều hướng xuống. Tất cả các mục menu chính của nó đã được đơn giản hóa thành các thanh màu rất mỏng. Khi di chuột vào chúng, các mục menu con sẽ bật lên để hướng dẫn người dùng xung quanh. Một ví dụ hoàn hảo để bạn xây dựng một trang web tối giản.

11. Trình đơn thả xuống sáng tạo với các biểu tượng

Trình đơn thả xuống quảng cáo có biểu tượng là một lựa chọn tốt -trình đơn điều hướng thả xuống được làm thủ công. Nó có một màu xanh lam rất hợp thời trang & amp; phối màu trắng. Và mỗi mục menu con được cấu trúc tốt và có các biểu tượng nét rất nổi bật.

12. Trình đơn thả xuống của Zenith Arena De Lille

Menu thả xuống của Zenith Arena De Lille được tạo đặc biệt cho một nhà thi đấu đa năng trong nhà. Vì tất cả các sự kiện của họ được lên lịch theo tháng, người dùng có thể dễ dàng nhấp để hiển thị hoặc ẩn danh sách sự kiện cả tháng và chọn sự kiện mong muốn của họ để xem chi tiết.

Xem Thêm  Cách thêm JavaScript vào HTML - cách thêm js vào html

13. Trình đơn thả xuống của SkySmile

Trình đơn thả xuống SkySmile sử dụng nền màu gradient để làm nổi bật menu thả xuống. Và cách phối màu xanh lam cũng kết hợp hoàn hảo với nền trang chủ.

14. Tương tác trình đơn thả xuống tối thiểu

Tương tác với menu thả xuống tối thiểu là một trình đơn thả xuống rất cổ điển menu cho một nút biểu tượng nổi. Khi di chuột vào nút, một menu thả xuống bao gồm các biểu tượng sẽ bật lên để cung cấp các lựa chọn điều hướng khác nhau của bạn. Nó là cách hoàn hảo để giúp bạn tạo một ứng dụng di động tối thiểu.

15. Trình đơn thả xuống của Ứng dụng dành cho thiết bị di động

Trình đơn thả xuống ứng dụng di động là một ví dụ điển hình khác mà các nhà thiết kế có thể làm theo để tạo trình đơn thả xuống tuyệt vời cho các ứng dụng di động tối thiểu. Nó không chỉ sử dụng các mục trong menu con biểu tượng mà còn có hiệu ứng trượt rất sáng tạo để hiển thị các tùy chọn một cách sinh động.

16. Thiết kế hộp thả xuống thông báo

Thiết kế hộp thả xuống thông báo là một trình đơn thả xuống tuyệt vời thiết kế cho các trang web tối giản để giới thiệu tin tức thông báo. Khi người dùng di chuột vào biểu tượng thông báo phía trên, một hộp thả xuống sẽ ngay lập tức hiển thị để hiển thị các tin tức thông báo khác nhau. Thời gian, người và từ khóa tin tức liên quan cũng sẽ được hiển thị để họ quét nhanh chóng.

17. Trình đơn thả xuống thông báo

Trình đơn thả xuống thông báo là một trình đơn thả xuống tuyệt đẹp khác được tạo cho các nút biểu tượng thông báo. Không giống như ví dụ trước đầy hình ảnh và thông tin, menu thả xuống thông báo này có giao diện rất tối giản và sử dụng hình minh họa mèo dễ thương và màu hồng tươi sáng để thu hút ánh nhìn của khách truy cập.

18. Hoạt ảnh trên menu thả xuống của HTML

Hoạt ảnh trên menu thả xuống của HTML được tạo đặc biệt cho trang web tối giản để hiển thị / ẩn các menu điều hướng của nó. Nó có một hình ảnh động thả chậm độc đáo. Nó cũng cung cấp cho người dùng mã HTML / CSS / JS. Nếu bạn quan tâm, bạn có thể trực tiếp sao chép và dán các mã này vào thiết kế của mình để phát triển nhanh hơn và dễ dàng hơn.

19. Giới thiệu về chúng tôi Hoạt ảnh trên menu thả xuống

Giới thiệu về chúng tôi Hoạt ảnh trên menu thả xuống là một trình đơn thả xuống menu dành cho phần “Giới thiệu”. Nó có một hình ảnh động bật ra thông minh. Và mọi menu con đều được thiết kế với biểu tượng phẳng giúp người dùng nắm bắt thông tin mặt hàng một cách dễ dàng.

20. Menu thả xuống tương tác

Trình đơn thả xuống tương tác là trình đơn thả xuống được tạo cho một thanh lọc. Sau khi hiện ra, người dùng có thể dễ dàng chọn các tùy chọn bộ lọc, chẳng hạn như loại nhà, phòng ngủ và tiện nghi, v.v., để tìm kiếm kết quả mong muốn của họ. Đây là một ví dụ hay về cách thiết kế menu thả xuống tương tác cho các thanh tìm kiếm / bộ lọc.

21. Menu thả xuống của cửa hàng

Trình đơn thả xuống của cửa hàng chỉ sử dụng các biểu tượng để hiển thị các danh mục sản phẩm khác nhau.

22. Mini Cooper

Mini Cooper là một trang web về xe hơi thú vị sử dụng drop- menu điều hướng xuống. Nó có các kiểu menu con và hiệu ứng di chuột phong phú.

23. Bảng sao

Board Star là một cửa hàng bán ván trượt tuyết trực tuyến. Trình đơn điều hướng thả xuống của nó có phong cách thiết kế cổ điển đặc biệt và sử dụng danh sách trực quan và thiết kế thẻ để cung cấp các tùy chọn sản phẩm khác nhau.

24. Porsche

Porsche là một trang web về xe hơi phong cách khác sử dụng kiểu thả- menu điều hướng xuống. Khi di chuột vào ô tô, hình ảnh có liên quan sẽ hiển thị ở phía bên phải, giúp bạn có cái nhìn nhanh về chiếc ô tô từ trước.

25. Audi

Audi là một trang web xe hơi nổi tiếng sử dụng điều hướng thả xuống trực quan thực đơn. Giống như Porsche, menu con thả xuống của nó sử dụng hình ảnh xe hơi. Tuy nhiên, nó cũng có một cách bố trí rất khác biệt và hiệu quả để trình bày các chi tiết xe.

26. Sony Play Station

Sony Play Station có một menu điều hướng thả xuống có thể nhấp tuyệt vời và tất cả trong số các menu con của nó được tạo bằng các biểu tượng đậm sáng tạo. Một ví dụ hoàn hảo để tạo một menu biểu tượng hấp dẫn.

27. Mr Clean

Mr Clean cung cấp các sản phẩm và giải pháp sạch khác nhau. Trang web chính thức của nó sử dụng menu điều hướng thả xuống tuyệt đẹp bao gồm hình ảnh sản phẩm và nhãn ngắn.

28. KFC

KFC sử dụng trình đơn thả xuống theo chiều dọc để giúp bạn điều hướng xung quanh. Hoạt hình menu con cũng rất tuyệt.

Xem Thêm  Cách căn giữa văn bản trong HTML - cách căn giữa tiêu đề trong html

29. Taco Bell

Taco Bell có thể giúp người dùng nhanh chóng tìm thấy thực đơn ngon hoặc cửa hàng mua sắm lân cận trực tuyến. Trang web của nó có một thanh điều hướng bên tuyệt đẹp sử dụng các menu thả xuống theo chiều dọc.

30. Du lịch miền Tây

Du lịch Bern là một trang web du lịch có thể giúp khách truy cập tìm thấy các sự kiện, điểm tham quan và hoạt động hàng đầu ở Thụy Sĩ. Nó sử dụng menu điều hướng thả xuống nhiều cấp với thanh tab thông minh.

10 Thực tiễn Tốt nhất về Trình đơn thả xuống Bạn nên Làm theo

Sau khi xem tất cả các ví dụ về trình đơn thả xuống này, bạn có thể muốn biết điều gì đã tạo nên một menu thả xuống tốt và những mẹo bạn nên làm theo để tạo menu thả xuống tốt.

Vì vậy, chúng tôi cũng đã thu thập 10 phương pháp hay nhất để thiết kế menu thả xuống để giải thích những mẹo bạn nên làm theo để tạo ra một thiết kế menu thả xuống hữu ích và hiệu quả hơn một cách nhanh chóng:

1. Giữ menu dưới hai cấp sâu

Các menu thả xuống quá dài hoặc phức tạp có thể gây phiền hà cho người dùng và đôi khi thậm chí khiến họ mất tập trung vào menu. Vì vậy, bạn nên luôn giữ các menu thả xuống sâu dưới hai cấp độ.

Lấy trang web Slack làm ví dụ, trang web này sử dụng trình đơn thả xuống hai cấp để trình bày thông tin tài nguyên một cách rõ ràng và trực quan.

Tất nhiên, nếu bạn thực sự cần menu có nhiều hơn hai cấp, hiệu ứng di chuột hoặc lựa chọn có thể giúp bạn hướng sự tập trung của người dùng, cho phép họ nhanh chóng tìm thấy các tùy chọn menu mong muốn.

Ví dụ: WooCommerce sử dụng hiệu ứng di chuột thông minh để hiển thị từng bước các mục menu.

2. Tạo trình đơn thả xuống rõ ràng và có cấu trúc tốt

Khi thiết kế trình đơn thả xuống, việc có một danh sách mục rõ ràng, có cấu trúc tốt và dễ đọc là rất quan trọng. Để đạt được điều này, bạn nên xem xét nhiều yếu tố, chẳng hạn như phông chữ dễ đọc, kiểu chữ rõ ràng, đủ khoảng cách và thậm chí là cấu trúc / bố cục gọn gàng, v.v.

Trang web thiết bị âm nhạc dưới đây hướng dẫn bạn cách tạo trình đơn thả xuống theo chiều ngang có cấu trúc tốt sử dụng phông chữ, kích thước phông chữ, màu sắc, biểu tượng và bố cục đa dạng:

3. Thêm hiệu ứng di chuột hoặc lựa chọn để các mục menu nổi bật

Để tạo menu thả xuống hiệu quả, bạn nên thêm một, hai hoặc nhiều hiệu ứng di chuột hoặc lựa chọn để hướng dẫn người dùng.

Ví dụ: khi di chuột vào menu thả xuống bóng đá bên dưới, nền màu xanh lam sáng và biểu tượng màu trắng sẽ hiển thị để làm nổi bật mục menu tập trung của bạn. Nó giúp bạn tìm thấy các tùy chọn menu mong muốn một cách nhanh chóng.

Ngoài ra, lưu ý rằng bạn phải luôn tập trung vào thời gian đóng của hiệu ứng di chuột. Quá dài hoặc quá ngắn đều có thể gây phiền hà cho người dùng.

4. Sử dụng các biểu tượng hoặc hình ảnh để làm phong phú thêm trình đơn thả xuống của bạn

Không có cách cố định nào để thiết kế trình đơn thả xuống. Ngoài việc sử dụng các phông chữ, kiểu chữ và màu sắc khác nhau, bạn vẫn có thể thêm các biểu tượng và hình ảnh tùy chỉnh để làm phong phú menu của mình.

Như trang web JetBlue bên dưới, bạn vẫn có thể sử dụng nhiều hình ảnh, biểu tượng và văn bản để tạo một menu thả xuống hấp dẫn và hiệu quả hơn.

5. Giữ cho các kiểu menu nhất quán

Khi thiết kế menu thả xuống, bạn nên sử dụng các kiểu menu, hình nền và hình ảnh tương tự để làm cho toàn bộ menu hoạt động như một đơn vị duy nhất.

Lấy trang web máy tính Dell bên dưới làm ví dụ. Nó sử dụng menu thả xuống hai cấp với cùng kiểu văn bản và hình ảnh để thu hút khách truy cập.

6. Tô xám các mục menu không có sẵn

Khi một số sản phẩm hoặc dịch vụ hết hàng hoặc tạm thời không có sẵn, việc xóa mù các mục menu có liên quan có thể phá vỡ toàn bộ bố cục, khiến người dùng xem và điều hướng kém hơn . Tại thời điểm này, bạn có thể tô xám chúng trực tiếp để tránh mọi rắc rối.

Việc làm xám trực tiếp các mục menu sẽ không ảnh hưởng đến toàn bộ bố cục, giúp bạn tiết kiệm thêm thời gian để xử lý các tùy chọn không có sẵn.

7. Thêm hoạt ảnh thả xuống nhanh

Bạn cũng có thể thêm hoạt ảnh thả xuống nhanh (như hoạt ảnh trượt, mờ dần, nhảy hoặc quay cuồng) để thu hút người dùng.

Ví dụ: trang web Mẫu dàn xếp bên dưới sử dụng hoạt ảnh trượt bắt mắt để thu hút người dùng:

8. Sử dụng nền nửa trong suốt để làm nổi bật các menu của bạn

Để nổi bật trong menu thả xuống, bạn có thể sử dụng nền nửa trong suốt.

Trang web Econsultancy dưới đây sử dụng nền nửa trong suốt để dễ dàng làm nổi bật toàn bộ menu thả xuống:

9. Sử dụng màu nền khác để làm nổi bật các menu của bạn

Thay vì nền bán gốc, nền menu màu cũng giúp giữ cho các menu thả xuống khác với nền.

Và trang web Nội thất này đưa ra một ví dụ điển hình về cách làm nổi bật menu thả xuống của bạn bằng màu nền khác:

Xem Thêm  Thêm hình ảnh bằng CSS - cách nhập hình ảnh vào css

10. Kiểm tra trình đơn thả xuống thường xuyên

Dù điều gì xảy ra, bạn cũng nên thường xuyên kiểm tra trình đơn thả xuống để đảm bảo rằng nó luôn hoạt động tốt.

Nhìn chung, chúng tôi hy vọng những ví dụ sáng tạo và phương pháp hay nhất này có thể truyền cảm hứng cho bạn.

Làm thế nào để tạo menu thả xuống?

Nếu bạn vẫn không biết cách tạo trình đơn thả xuống từ đầu, thì đây là hai cách có sẵn:

1. Tạo trình đơn thả xuống với mẫu HTML / CSS

Đối với các nhà thiết kế UI / UX, cách nhanh nhất là sử dụng mẫu thiết kế trình đơn thả xuống. Có nhiều mẫu HTML / CSS trực tuyến. Bạn có thể tự do tìm kiếm một cái dựa trên nhu cầu của riêng bạn.

2. Tạo menu thả xuống bằng công cụ thiết kế

Tuy nhiên, nếu không cần mẫu, bạn có thể sử dụng công cụ thiết kế để trực quan hóa ý tưởng menu của mình. Mockplus , nền tảng thiết kế sản phẩm tất cả trong một, là một lựa chọn tốt cho bạn. Nó cho phép bạn tạo nguyên mẫu các menu thả xuống của mình, thêm các tương tác, kiểm tra, chia sẻ và chuyển giao trực tuyến một cách dễ dàng.

Kết thúc

Một trình đơn thả xuống được thiết kế khéo léo sẽ giúp nâng cao trải nghiệm người dùng một cách hiệu quả. Chúng tôi hy vọng những ví dụ thiết kế menu thả xuống tốt nhất, các phương pháp hay nhất và mẹo thiết kế này có thể giúp bạn tạo một trang web / ứng dụng tuyệt vời một cách dễ dàng.


Xem thêm những thông tin liên quan đến chủ đề hộp menu thả xuống

How to Create a Drop Down List in Word

alt

  • Tác giả: Excel, Word and PowerPoint Tutorials from Howtech
  • Ngày đăng: 2013-05-03
  • Đánh giá: 4 ⭐ ( 1212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video tutorial we will show you how to create a drop down list in Word.

    This tutorial is going to show you how to easily create a simple drop down list in Word.

    Step 1 — Accessing the Developer Tab

    First of all you are going to need to make the “Developer” tab visible. Click “File” and then “Options” and in the window that appears click “Customize Ribbon” from the tabs on the left. In the frame on the right check the box next to “Developer” and click “OK”. You will now see that there is a “Developer” tab in the ribbon at the top of the program — click on this.

    Step 2 — Creating the Drop Down Box

    One section of the developer tab reads “Controls” and within this there is an icon called “Drop-Down list Content Control”, click this. Now click the “Properties” icon next to it and the “Content Control Properties” window will appear. Give a title to the drop down box.

    Step 3 — Adding Options to the Box

    Click the “Add” button further down the window and use this to enter an option for the drop down list. Click “OK” and repeat this procedure to add more options to the list, here we are just adding two more options. Finally click “OK” and the drop down box will have been completed and that is how to make a drop down list in Word. To test that it works, click on it and select one of the options.

Cách Tạo Danh Sách Thả Xuống Có Điều Kiện, Tạo Danh Sách Thả Xuống Trong Ô

  • Tác giả: giasuviet.edu.vn
  • Đánh giá: 4 ⭐ ( 1273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, bạn tạo khám phá bốn cách tạo danh sách Data Validation Excel (drop-down list) khác nhau: dựa trên danh sách giá trị, phạm vi của ô, phạm vi được đặt tên và danh sách dropdown động, Đồng thời chúng tôi cũng sẽ hướng dẫn bạn cách tạo danh sách dropdown từ một workbook khác, cũng như cách chỉnh sửa và xóa danh sách Data Validation trong Excel

Tạo danh sách thả xuống

  • Tác giả: support.microsoft.com
  • Đánh giá: 5 ⭐ ( 5479 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể chèn một danh sách thả xuống gồm các mục nhập hợp lệ (cũng được gọi là một menu thả xuống hoặc hộp thả xuống) trong Excel để cho phép nhập dữ liệu dễ dàng hơn, hoặc để giới hạn các mục nhập chỉ nằm trong những mục nhất định mà bạn đã xác định.

Cách tạo menu, danh sách thả xuống trong Google Sheets

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 8783 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: tao menu tha xuong trong google sheets, Tạo menu, danh sách thả xuống trong Google Sheets giúp người sử dụng tiết kiệm được không gian trong bảng tính

Tạo danh sách thả xuống trong ô

  • Tác giả: support.google.com
  • Đánh giá: 3 ⭐ ( 2698 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo danh sách thả xuống trong một ô bằng Google Trang tính.
    Tạo danh sách thả xuống Mở một bảng tính trong

Sử dụng Dropdown trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 6890 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hiệu ứng Dropdown được sử dụng chủ yếu với các thanh menu điều hướng như một giải pháp không thể thiếu trong thiết kế trang web

Hướng dẫn tạo danh sách thả xuống trong Excel: tĩnh, động và từ một workbook khác

  • Tác giả: gitiho.com
  • Đánh giá: 4 ⭐ ( 4704 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách tạo, chỉnh sửa, xóa danh sách Data Validation Excel (drop-down list) dựa trên giá trị, phạm vi ô,…và danh sách dropdown động và từ một workbook khác

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình