Làm thế nào để đặt các mục danh sách theo chiều ngang? Tổng quan tuyệt vời về menu đa cấp đẹp mắt với codepen

1. Menu jQuery sáng dọc 2. Hiệu ứng tuyệt vời. Thực đơn khiêu vũ.

4. Danh sách thả xuống sử dụng jQuery

Kiểu dáng tuyệt vời của thành phần giao diện ở dạng danh sách thả xuống.

Khi bạn di chuột qua nút, một bảng điều khiển sẽ xuất hiện ở trên cùng.

6. Plugin jQuery “MollyBlocks” để hiển thị menu xuyên tâm

7. Menu sử dụng sprite

Menu javascript hoạt hình với hiệu ứng phát sáng.

Menu mới, đẹp mắt sử dụng jQuery.

9. Menu “GarageDoor” của jQuery 10. Menu cuộn dọc của jQuery

Triển khai thực đơn với số lượng món lớn. Cuộn khi bạn di chuyển con trỏ chuột lên hoặc xuống.

11. Thiết kế danh sách thả xuống jQuery

12. Plugin điều hướng trang

Cuộn mượt mà đến phần mong muốn trên trang. Plugin điều hướng một trang của jQuery.

13. Plugin “Menu nội dung hoạt hình”

Plugin jQuery mới. Thực hiện tuyệt vời điều hướng trang web hoạt hình. Khi bạn xem qua các mục menu, một khối có mô tả và các liên kết có thể sẽ bật lên và tùy thuộc vào mục đã chọn, nền của trang sẽ thay đổi, kéo dài để lấp đầy toàn bộ màn hình bất kể kích thước của cửa sổ trình duyệt. Hãy chắc chắn kiểm tra trang demo.

14. Plugin menu “Sweet Menu” của jQuery

Menu hoạt hình với các mục bật lên.

15. Đã sửa lỗi menu jQuery

Khi bạn cuộn trang xuống, menu vẫn cố định ở đầu màn hình.

16. Menu cuộn bộ trượt

Để triển khai một menu dọc với số lượng lớn các mục. Việc cuộn qua các mục được thực hiện bằng cách sử dụng con lăn chuột hoặc sử dụng liên kết “Trước” và “Tiếp theo”.

17. Menu CSS3 sành điệu

18. Menu CSS3 mới theo phong cách Apple

Menu mới theo phong cách Apple. Trông nó có vẻ đen tối hơn trước nhưng không kém phần dễ thương.

19. Menu jQuery gốc

Menu thả xuống với hiệu ứng nền. Các mục phụ của menu mở rộng lên trên. Khi bạn di chuột qua một mục menu, hình nền sẽ thay đổi.

20. Menu hoạt hình với jQuery

Thực đơn hoạt hình. Các mục menu được trình bày dưới dạng biểu tượng và mô tả. Một số hiệu ứng tuyệt vời khi di chuột qua một mục menu. Có 8 hiệu ứng, để xem tất cả - hãy nhấp vào các liên kết Exemple1-Exemple8 trên trang demo.

21. Menu XML “Cuộn” có tính năng cuộn

Menu cuộn dọc và ngang. Một giải pháp tốt nếu có nhiều món trên menu.

22. Menu ngữ cảnh trên trang web sử dụng jQuery

Một menu bật lên khi bạn nhấp chuột phải vào một khu vực cụ thể.

23. Menu hai cấp tròn cho trang web

Khi bạn chọn một mục menu, các mục menu phụ sẽ được hiển thị ở bên phải.

24. Menu jQuery CSS3 với hiệu ứng làm mờ “Blur Menu” CSS3

Menu jQuery CSS3 ban đầu có 7 kiểu khác nhau. Khi bạn di chuột qua một trong các mục menu, phần còn lại dường như mờ đi.

25. Một số menu jQuery CSS3 hoạt hình đẹp mắt

10 menu hoạt hình sáng tạo. Menu CSS3 ngang và dọc với nhiều hiệu ứng và chuyển tiếp khác nhau.

Kho lưu trữ cũng bao gồm tệp PSD menu gốc.

27. Thực đơn MagicLine

Nền hoặc gạch chân của một mục menu di chuyển theo con chuột với độ trễ nhẹ, trong khi nền thay đổi màu sắc mượt mà khi di chuyển từ mục này sang mục khác. Hiệu ứng rất đẹp, trông khác thường. Chú ý: hiệu ứng không hoạt động trong opera

28. Bong bóng hình ảnh

Một hiệu ứng tuyệt vời khi bạn di chuột qua một trong các hình ảnh. Hiệu ứng này phần nào gợi nhớ đến jQDock được mô tả ở trên.

31. Menu jQuery thú vị với nhiều hiệu ứng khác nhau

Menu ngang, dọc. Hiệu ứng thú vị.

32. Menu jQuery phong cách Apple tuyệt vời

34. Menu jQuery với hiệu ứng thú vị

36. Menu mới với hiệu ứng thú vị bằng jQuery

Một hiệu ứng rất thú vị. Hoàn hảo cho việc thiết kế các trang web danh mục đầu tư.

Hiệu ứng thú vị của hình thu nhỏ hiện lên khi di chuột.

40. Danh sách thả xuống với tính năng tự động cuộn

Hiệu ứng chuyển tiếp đẹp mắt giữa các mục.

42. Menu jQuery tuyệt vời

43. Menu jQuery lớn đẹp mắt

44. Menu cuộn jQuery

Các mục menu được trình bày dưới dạng hình thu nhỏ.

46. Menu điều hướng xuyên tâm jQuery

47. Trình đơn CSS và jQuery

Thanh điều hướng có hộp tìm kiếm trở nên mờ khi bạn cuộn trang xuống.

48. Menu jQuery ngang

49. Menu jQuery dọc

Menu dọc tuyệt vời. Khi bạn di con trỏ, một mục menu sẽ bật lên.

50. Menu jQuery ngang

Một hiệu ứng thú vị khi di con trỏ lên một mục menu.

52. Menu thả xuống jQuery

Khi bạn di chuột qua menu, các mục của nó sẽ xuất hiện. Các mục xuất hiện được hiển thị dưới dạng vòng cung, bán kính mà bạn có thể đặt khi định cấu hình plugin. Trong một số trình duyệt, bạn sẽ không thấy màn hình hình vòng cung, menu sẽ được hiển thị thẳng, nhưng điều này vẫn không làm hỏng ấn tượng chung về việc triển khai menu jQuery này.

53. Thanh điều hướng CSS và jQuery

Một hiệu ứng thú vị khi di chuột qua một mục menu.

54. Bảng bật lên jQuery

Menu hoạt hình tươi với tông màu xám.

58. Điều hướng trang dạng cột bằng jQuery

Một giải pháp điều hướng thú vị được trình bày dưới dạng sọc dọc. Khi bạn di chuột qua các thanh này, hình ảnh của mục đó và danh sách các menu con sẽ xuất hiện. Khi bạn nhấp vào một mục menu con, một trang có mô tả sẽ xuất hiện. Việc triển khai này là hoàn hảo cho các trang web quảng cáo hoặc thuyết trình. Hãy chắc chắn kiểm tra bản demo của plugin.

59. Điều hướng trang web jQuery

Điều hướng trang web được trình bày dưới dạng 4 hình ảnh, khi bạn di chuột qua chúng, bạn sẽ thấy một hiệu ứng hoạt hình thú vị.

60. Thanh điều hướng cuộn có nội dung

Bảng điều hướng. Nhấp vào mũi tên sẽ cuộn trang. Điều hướng cuộn cùng với nội dung trang.

61. Bảng điều khiển jQuery với nhiều dịch vụ xã hội khác nhau

62. Menu jQuery hoạt hình gọn gàng

63. Menu “Bàn chải màu nước” của jQuery

Nhiệm vụ căn giữa một menu ngang có thể khó khăn, đặc biệt đối với những người mới làm quen với CSS. Việc tìm kiếm giải pháp dẫn đến một danh sách các phương pháp rất hạn chế, hầu hết đều dựa vào các thủ thuật CSS, JavaScript hoặc sử dụng các quy tắc không chuẩn không được tất cả các trình duyệt hỗ trợ. Trong hướng dẫn này, chúng ta sẽ tìm hiểu một phương pháp căn giữa menu ngang chỉ sử dụng các quy tắc CSS tiêu chuẩn và hoạt động trong tất cả các trình duyệt.

Ví dụ về menu ở giữa

Bên dưới là một menu ngang được căn giữa trong cột này, trong đó tab thứ hai được kích hoạt. Bạn có thể thử thay đổi kích thước cửa sổ hoặc trang trình duyệt của mình để đảm bảo menu luôn ở giữa và hoạt động.

Trên trang demo, bạn có thể thấy một số tùy chọn thiết kế cho menu được căn giữa theo chiều ngang. Bất kỳ trong số chúng có thể được sử dụng trong các dự án của bạn.

đánh dấu HTML

Tất cả các menu được hiển thị trong hướng dẫn này đều sử dụng cấu trúc đơn giản. Đây là danh sách các liên kết không có thứ tự thông thường được đặt trong một phần tử div.

Dấu trang đầu tiên
Dấu trang thứ hai
Tab thứ ba
Tab thứ tư

Mã CSS của menu ở giữa

Dưới đây là mã CSS hoàn chỉnh được sử dụng để căn giữa menu. Phần giải thích về nguyên lý hoạt động sẽ được đưa ra ở phần sau của bài học.

#centeredmenu ( float:left; width:100%; nền:#fff; border-bottom:4px Solid #000; tràn:ẩn; vị trí:tương đối; ) #centeredmenu ul ( clear:left; float:left; list-style :none; lề:0; phần đệm:0; vị trí:tương đối; trái:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; Margin:0; đệm:0; vị trí:tương đối; phải:50%; ) #centeredmenu ul li a ( display:block; lề:0 0 0 1px; đệm:3px 10px; nền:#ddd; color:#000; text-trang trí: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( nền:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( color:# fff; nền:#000; font-weight:bold; )

Phương pháp định tâm hoạt động như thế nào?

Hoạt động của phương pháp này dựa trên vị trí tương đối của các phần tử khối nổi bên trong phần tử kia. Đầu tiên, hãy xem kích thước của các phần tử thay đổi như thế nào khi dịch chuyển.

Yếu tố div(khối) không có sự dịch chuyển được kéo dài đến toàn bộ chiều rộng có sẵn cho nó.

Nhưng nếu chúng ta di chuyển div sang trái, nó sẽ tự động co lại để vừa với nội dung bên trong. Nén là chìa khóa để thực hiện phương pháp căn giữa menu này. Nó giúp bạn di chuyển menu đến đúng vị trí.

Menu căn trái tiêu chuẩn

Hãy lấy một menu căn trái tiêu chuẩn và làm lại nó từng bước. Để rõ ràng, các mục được tô màu khác nhau để bạn có thể ngay lập tức biết rõ những gì sẽ diễn ra ở đâu.

Xin lưu ý những điểm sau:

Yếu tố div menu trung tâm(hình chữ nhật màu xanh) được đặt lệch sang bên trái nhưng có chiều rộng 100% nên vẫn được kéo dài trên toàn bộ trang.
Yếu tố ul(hình chữ nhật màu hồng) nằm bên trong phần tử menu ở giữa div và di chuyển sang trái. Điều này có nghĩa là nó sẽ được nén theo chiều rộng của nội dung, tức là theo tổng chiều rộng của tất cả các dấu trang.
Tất cả các phần tử li (hình chữ nhật màu xanh lá cây) đều nằm bên trong phần tử ul và di chuyển sang trái. Do đó, chúng được nén theo kích thước của các liên kết trong đó và xếp thành một đường ngang.
Bên trong mỗi liên kết (hình chữ nhật màu cam), văn bản dấu trang được hiển thị: Dấu trang 1, Dấu trang 2, v.v.

Thay đổi vị trí của danh sách không có thứ tự

Sau đó chúng tôi bù đắp phần tử ul sang phải 50% bằng cách sử dụng vị trí: tương đối; . Khi một phần tử được bù theo tỷ lệ phần trăm trong các điều kiện này, điều quan trọng cần nhớ là tổng chiều rộng của các phần tử mà nó chứa không phải là chiều rộng của nó. Trong trường hợp của chúng tôi, phần bù xảy ra ở một nửa cửa sổ trình duyệt (hoặc không gian có sẵn để hiển thị). Do đó, menu của chúng tôi bắt đầu ở giữa cửa sổ và một phần mở rộng ra ngoài ranh giới của nó. Và hãy chuyển sang bước tiếp theo.

Thay đổi vị trí của tất cả các thành phần menu

Tất cả những gì còn lại là di chuyển tất cả các phần tử lý còn lại 50%. Đây là 50% chiều rộng của phần tử ul của chúng tôi (vùng chứa menu). Do đó, dấu trang được dịch chuyển chính xác đến giữa cửa sổ.

Một số lưu ý quan trọng

Khi sử dụng phương pháp định tâm này, có một số điểm quan trọng cần nhớ:

Vì phần tử ul một phần mở rộng ra ngoài cửa sổ, điều này dẫn đến việc hiển thị các thanh cuộn. Vì vậy, bạn cần sử dụng quy tắc tràn:ẩn;. cho phần tử div menu trung tâm. Vì vậy, phần nhô ra của phần tử div sẽ bị cắt đứt.
Vì phần tử ul không được căn chỉnh theo dấu trang, bạn không thể sử dụng bất kỳ kiểu trực quan nào cho nó. Để phần tử ul không có màu nền và không có đường viền để nó hoàn toàn vô hình. Và kiểu đánh dấu chỉ nên sử dụng cho các phần tử lý.
Nếu bạn cần đặt kiểu đặc biệt cho dấu trang đầu tiên và cuối cùng, bạn cần thêm một lớp cho thành phần đầu tiên và cuối cùng lý, vì vậy bạn có thể tạo kiểu riêng cho chúng.

Phần kết luận

Giải pháp được đề xuất tương thích với tất cả các trình duyệt, không sử dụng JavaScript và hỗ trợ văn bản có thể thay đổi kích thước.

Hầu hết các trang web cổ điển trên Internet đều sử dụng menu ngang làm thành phần điều hướng chính. Đôi khi nó có thể chứa nhiều tính năng bổ sung khác nhau - cấu trúc đa cấp, biểu tượng cho các mục phụ, khối tìm kiếm, danh sách phức tạp, v.v. Gần đây có một lựa chọn nhỏ trên blog và hôm nay chúng ta sẽ xem xét 4 ví dụ thực tế về cách tạo menu thả xuống bằng CSS + HTML. Thông tin sẽ hữu ích cho những nhà phát triển mới làm quen và những người muốn thay đổi điều hướng trên trang web của họ.

Hướng dẫn về Menu thả xuống CSS3 đầu tiên là phần mới nhất trong bộ sưu tập (từ tháng 4 năm 2016). Ưu điểm của giải pháp: trong menu thả xuống theo chiều ngang này cho trang web, các mục phụ chứa các biểu tượng, cách triển khai và bản thân mã CSS khá đơn giản để hiểu và triển khai.

Bước 1 - Đánh dấu HTML

Bước đầu tiên là tạo một danh sách không có thứ tự trong HTML với các liên kết neo (#) cho các phần tử của nó. Ở đó, tại một trong các mục, chúng tôi thêm một danh sách lồng nhau khác, danh sách này sẽ chịu trách nhiệm về menu con.

Bước 2 - Hiển thị menu

Chúng tôi loại bỏ những thụt lề không cần thiết trong CSS cho các thành phần của menu thả xuống ngang của trang web. Ở giai đoạn tương tự, chúng tôi sẽ đặt chiều rộng và chiều cao cố định của các mục menu, đồng thời thêm các góc tròn.

.menu, .menu ul, .menu li, .menu a ( lề : 0 ; phần đệm : 0 ; viền : không ; phác thảo : không ; ) .menu ( chiều cao : 40px ; chiều rộng : 505px ; nền : #4c4e5a ; nền : -webkit-tuyến tính-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; nền : -moz-Tuyến-gradient(top , #4c4e5a 0% , #2c2d33 100% ); nền : -o-tuyến tính-gradient (top , #4c4e5a 0% , #2c2d33 100% ) ; nền : -ms-Tuyến-gradient(top , #4c4e5a 0% , #2c2d33 100% ) ; nền : gradient-tuyến tính(top , #4c4e5a 0% , # 2c2d33 100% ); -webkit-border-radius: 5px ; -moz-border-radius: 5px ; bán kính đường viền: 5px ; ) .menu li ( vị trí: tương đối ; kiểu danh sách: không có ; float : trái ; hiển thị : khối ; chiều cao : 40px ; )

Menu, .menu ul, .menu li, .menu a ( lề: 0; phần đệm: 0; viền: không; phác thảo: không; ) .menu ( chiều cao: 40px; chiều rộng: 505px; nền: #4c4e5a; nền: - webkit-tuyến tính-gradient(top, #4c4e5a 0%,#2c2d33 100%); nền: -moz-Tuyến-gradient(top, #4c4e5a 0%,#2c2d33 100%); nền: -o-tuyến tính-gradient( top, #4c4e5a 0%,#2c2d33 100%); nền: -ms-Tuyến-gradient(top, #4c4e5a 0%,#2c2d33 100%); nền: gradient tuyến tính(trên cùng, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; bán kính đường viền: 5px; ) .menu li ( vị trí: tương đối; kiểu danh sách: không có; float: trái; hiển thị: khối ; chiều cao: 40px; )

Bước 3 - liên kết

Ngoài các tính năng cơ bản về kiểu (font, màu sắc, chiều cao), chúng tôi sử dụng và tạo sự chuyển tiếp màu văn bản mượt mà khi di chuột. Chúng tôi cũng thêm dấu phân cách vào menu, xóa đường viền khỏi phần tử đầu tiên ở bên trái và phần tử cuối cùng ở bên phải.

.menu li a ( display : block ; phần đệm : 0 14px ; lề : 6px 0 ; line-height : 28px ; text-trang trí : none ; border-left : 1px Solid #393942 ; border-right : 1px Solid #4f5058 ; font -family : Helvetica, Arial, sans-serif ; font-weight : đậm ; font-size : 13px ; color : #f3f3f3 ; text-shadow : 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit- transition: màu .2s dễ dàng ra vào; -moz-transition: màu .2s dễ dàng ra vào; -o-transition: màu .2s dễ dàng ra vào; -ms-transition: màu .2s dễ dàng vào -out; transition : color .2s easy-in-out; ) .menu li: con đầu a ( border-left : none ; ) .menu li: con cuối a( border-right : none ; ) .menu li : di chuột > a ( màu : #8fde62 ; )

Menu li a ( display: block; đệm: 0 14px; lề: 6px 0; chiều cao dòng: 28px; trang trí văn bản: không có; viền-trái: 1px rắn #393942; viền-phải: 1px rắn #4f5058; phông chữ- họ: Helvetica, Arial, sans-serif; font-weight: đậm; font-size: 13px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : màu .2s dễ ra vào; -moz-transition: màu .2s dễ ra vào; -o-transition: màu .2s dễ ra vào; -ms-transition: màu .2s dễ vào- out; transition: color .2s easy-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: di chuột > a ( màu: #8fde62; )

Bước 4 - menu con

Vì chúng ta có menu trang web thả xuống bằng CSS nên chúng ta cũng nên đặt thiết kế cho danh sách lồng nhau. Đầu tiên, đặt lề 40px ở trên và 0px ở bên trái + thêm các góc tròn. Để hiển thị/ẩn menu con, ban đầu hãy đặt thuộc tính độ mờ về 0 và khi di chuột nó về một. Để tạo hiệu ứng xuất hiện menu con, hãy đặt giá trị của chiều cao danh sách về 0 và với hover = 36px.

.menu ul (vị trí: tuyệt đối; trên cùng: 40px; trái: 0; độ mờ: 0; nền: #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; đường viền -radius : 0 0 5px 5px ; -webkit-transition: opacity .25s easy .1s ; -moz-transition: opacity .25s easy .1s ; -o-transition: opacity .25s easy .1s ; -ms-transition: opacity .25s dễ dàng .1s ; chuyển đổi : độ mờ .25s dễ dàng .1s ; ) .menu li: di chuột > ul ( độ mờ : 1 ; ) .menu ul li ( chiều cao : 0 ; tràn : ẩn ; phần đệm : 0 ; -webkit-transition : chiều cao .25s dễ dàng .1s ; -moz-transition: chiều cao .25s dễ dàng .1s ; -o-transition: chiều cao .25s dễ dàng .1s ; -ms-transition: chiều cao .25s dễ dàng .1s ; transition : chiều cao .25s dễ dàng .1s ; ) .menu li: di chuột > ul li ( chiều cao : 36px ; tràn : hiển thị ; phần đệm : 0 ; )

Menu ul (vị trí: tuyệt đối; trên cùng: 40px; trái: 0; độ mờ: 0; nền: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- bán kính: 0 0 5px 5px; -webkit-transition: độ mờ .25s dễ dàng .1s; -moz-transition: độ mờ .25s dễ dàng .1s; -o-transition: độ mờ .25s dễ dàng .1s; -ms-transition: độ mờ . 25s dễ dàng .1s; chuyển đổi: độ mờ .25s dễ dàng .1s; ) .menu li:hover > ul ( độ mờ: 1; ) .menu ul li ( chiều cao: 0; tràn: ẩn; phần đệm: 0; -webkit-transition: chiều cao .25s dễ dàng .1s; -moz-transition: chiều cao .25s dễ dàng .1s; -o-transition: chiều cao .25s dễ dàng .1s; -ms-transition: chiều cao .25s dễ dàng .1s; transition: chiều cao .25s dễ dàng . 1s; ) .menu li:hover > ul li ( chiều cao: 36px; tràn: hiển thị; phần đệm: 0; )

Chúng tôi đặt chiều rộng của các liên kết = 100px, đường viền dưới cùng của đường viền được thêm vào dưới cùng của tất cả các phần tử ngoại trừ phần cuối cùng. Ngoài ra, nếu muốn, bạn có thể đặt hình ảnh cho các mục menu con (chú ý! Đừng quên thay đổi đường dẫn đến hình ảnh trong mã thành đường dẫn bạn sử dụng).

.menu ul li a ( chiều rộng : 100px ; phần đệm : 4px 0 4px 40px ; lề : 0 ; đường viền : không có ; đường viền dưới : 1px rắn #353539 ; ) .menu ul li : con cuối cùng a ( đường viền : không có ; ) .menu a.documents ( nền : url (../img/docs.png ) không lặp lại trung tâm 6px; ) .menu a.messages ( nền : url (../img/bubble.png ) trung tâm 6px không lặp lại ; ) .menu a.signout ( nền : url (../img/arrow.png ) không lặp lại ở giữa 6px ; )

Menu ul li a ( width: 100px; phần đệm: 4px 0 4px 40px; lề: 0; border: none; border-bottom: 1px Solid #353539; ) .menu ul li:last-child a ( border: none; ) . menu a.documents ( nền: url(../img/docs.png) không lặp lại trung tâm 6px; ) .menu a.messages ( nền: url(../img/bubble.png) trung tâm 6px không lặp lại; ) .menu a.signout ( nền: url(../img/arrow.png) no-repeat 6px center; )

Cá nhân tôi thích sự dễ dàng thực hiện và sử dụng các biểu tượng. Đây là mã cuối cùng từ codepen:

Tùy chọn của Josh Riser có hình ảnh tương tự như menu thả xuống HTML và CSS trước đó. Mã không có bộ chọn con ">" (hữu ích trong thiết kế đa cấp), nhưng tác giả tận dụng tốt các hiệu ứng CSS3 (chuyển tiếp, bóng hộp và bóng văn bản) để có kết quả đẹp hơn. Link trong source không mô tả quá trình tạo menu thả xuống theo chiều ngang nên mình sẽ cung cấp ngay code cuối cùng:

Trong ví dụ này, chúng ta sẽ xem cách tạo menu thả xuống bằng CSS, ngoài các mục, sẽ chứa một khối tìm kiếm. Việc triển khai tương tự thường có thể được tìm thấy trong các ứng dụng . Về thời gian thực hiện và độ phức tạp, giải pháp phức tạp hơn một chút so với các giải pháp trước. Nó được xuất bản vào tháng 5 năm 2013, vì vậy bạn có thể cần phải điều chỉnh một số thứ, mặc dù nó hoạt động tốt trong thử nghiệm của chúng tôi.

Mã HTML

Để điều hướng, như mọi khi, một danh sách không có thứ tự (với lớp điều hướng) được sử dụng. Các mục menu thông thường là các mục danh sách (li) và chứa các liên kết (a href) không có bất kỳ lớp hoặc ID nào. Ngoại lệ là 3 thành phần chuyên biệt của menu thả xuống ngang này có ID sau:

cài đặt - liên kết hình ảnh;
tìm kiếm - một khối có tìm kiếm và nút tương ứng;
tùy chọn - chứa menu con (được triển khai thông qua danh sách với lớp subnav).

Ngoài ra, trong mã này, bạn sẽ thấy một tập lệnh không có tiền tố để sử dụng các thuộc tính CSS không có tiền tố. HTML cuối cùng cho menu thả xuống trông như thế này:

Ứng dụng
Bảng
Tùy chọn
- Cài đặt
- Ứng dụng
- Bảng
- Tùy chọn

Ứng dụng
Bảng
Tùy chọn
- Cài đặt
- Ứng dụng
- Bảng
- Tùy chọn

CSS trình đơn

1. Các kiểu cơ bản và thành phần menu

Đầu tiên, chúng tôi chỉ định phông chữ Montserrat, nền màu xám đậm và chiều cao cố định cho các mục menu. Tất cả các phần tử đều có float: căn lề trái và định vị tương đối để sau này bạn có thể thêm menu con với vị trí: tuyệt đối;

@import url (http: //fonts.googleapis.com/css?family= Montserrat) ; * ( lề : 0 ; phần đệm : 0 ; ) .nav ( nền : #232323 ; chiều cao : 60px ; hiển thị : khối nội tuyến ; ) .nav li ( float : left ; list-style-type : none ; vị trí : tương đối ; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( lề: 0; phần đệm: 0; ) .nav ( nền: #232323; chiều cao: 60px; hiển thị: khối nội tuyến; ) .nav li ( float: left; list-style-type: none; vị trí: tương đối; )

2. Định dạng liên kết

Các mục menu sử dụng thiết kế cơ bản + . Chiều cao giống như trong lớp điều hướng. Đối với #settings liên kết hình ảnh ở đầu menu, căn chỉnh được đặt.

.nav li a ( cỡ chữ : 16px ; màu : trắng ; hiển thị : khối ; chiều cao dòng : 60px ; phần đệm : 0 26px ; trang trí văn bản : không có ; viền trái : 1px rắn #2e2e2e ; họ phông chữ : Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: di chuột ( màu nền : #2e2e2e ; ) #settings a ( đệm : 18px ; chiều cao : 24px ; cỡ chữ : 10px ; chiều cao dòng : 24px ; )

Nav li a ( cỡ chữ: 16px; màu: trắng; hiển thị: khối; chiều cao dòng: 60px; đệm: 0 26px; trang trí văn bản: không có; viền trái: 1px rắn #2e2e2e; họ phông chữ: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( màu nền: #2e2e2e; ) #settings a ( đệm: 18px; chiều cao: 24px; cỡ chữ: 10px; chiều cao dòng: 24px; )

3. Khối tìm kiếm

Phần tử này có chiều rộng cố định và bao gồm một số phần - trường nhập (#search_text) có nền màu xanh lục và nút tìm kiếm (#search_button). Trong một số trình duyệt, màu nền có thể là màu xám.

#search ( chiều rộng : 357px ; lề : 4px ; ) #search_text ( chiều rộng : 297px ; đệm : 15px 0 15px 20px ; cỡ chữ : 16px ; họ phông chữ : Montserrat, sans-serif ; viền : 0 không ; chiều cao : 52px ; lề phải: 0 ; màu sắc : trắng ; đường viền : không có ; nền : #1f7f5c ; float : left ; box-sizing : border-box ; transition : tất cả 0,15s ; ) :: -webkit-input-placeholder ( /* Trình duyệt WebKit */ color : trắng ; ) : -moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ): -ms-input-placeholder ( /* Internet Explorer 10+ */ color : trắng ; ) #search_text : focus ( nền : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; nền : #1f7f5c url (search.png) trung tâm không lặp lại; chiều rộng: 60px; float: trái; đệm: 0; căn chỉnh văn bản: trung tâm; chiều cao: 52px; con trỏ: con trỏ;)

#search ( chiều rộng: 357px; lề: 4px; ) #search_text( chiều rộng: 297px; đệm: 15px 0 15px 20px; cỡ chữ: 16px; họ phông chữ: Montserrat, sans-serif; đường viền: 0 không; chiều cao: 52px ; lề phải: 0; màu: trắng; phác thảo: không; nền: #1f7f5c; float: trái; kích thước hộp: hộp viền; chuyển đổi: tất cả 0,15 giây; ) ::-webkit-input-placeholder ( /* Trình duyệt WebKit */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 to 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ): -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( nền: rgb(64, 151, 119); ) #search_button ( border: 0 none; nền: #1f7f5c url (search.png) trung tâm không lặp lại; chiều rộng: 60px; float: trái; đệm: 0; căn chỉnh văn bản: trung tâm; chiều cao: 52px; con trỏ: con trỏ; )

4. Menu con thả xuống

Lần chạm cuối cùng sẽ cho phép chúng ta tạo một menu thả xuống trong CSS kích hoạt mục #options cuối cùng.

#options a( border-left : 0 none ; ) #options > a ( hình nền : url (triangle.png ) ; vị trí nền : 85% ở giữa ; lặp lại nền : không lặp lại ; đệm-phải : 42px ; ) .subnav ( khả năng hiển thị : ẩn ; vị trí : tuyệt đối ; trên cùng : 110% ; phải : 0 ; chiều rộng : 200px ; chiều cao : tự động ; độ mờ : 0 ; chuyển tiếp : tất cả 0,1 giây ; nền : #232323 ; ) .subnav li ( float : none ; ) .subnav li a ( border-bottom : 1px Solid #2e2e2e ; ) #options : hover .subnav ( khả năng hiển thị : hiển thị ; top : 100% ; độ mờ : 1 ; )

#options a( border-left: 0 none; ) #options>a ( hình nền: url(triangle.png); vị trí nền: 85% ở giữa; lặp lại nền: không lặp lại; đệm-phải: 42px; ) .subnav ( khả năng hiển thị: ẩn; vị trí: tuyệt đối; trên cùng: 110%; phải: 0; chiều rộng: 200px; chiều cao: tự động; độ mờ: 0; chuyển tiếp: tất cả 0,1 giây; nền: #232323; ) .subnav li ( float : none; ) .subnav li a ( border-bottom: 1px Solid #2e2e2e; ) #options:hover .subnav ( khả năng hiển thị: hiển thị; top: 100%; độ mờ: 1; )

Trong các kiểu, bạn sẽ tìm thấy phần chèn hình nền hình tam giác (tam giác.png) để biểu thị menu con - đừng quên chỉ ra đường dẫn chính xác cho hình ảnh này và các hình ảnh khác trong ví dụ. Sự xuất hiện của menu con được triển khai bằng thuộc tính opacity. Giải pháp cuối cùng trên codepen:

Tùy chọn này chủ yếu sử dụng các kỹ thuật CSS2.1, giải pháp cộng hoặc trừ là mới - vào tháng 3 năm 2015. Nếu bạn thiếu một cấp độ phụ trong menu thả xuống ngang cho một trang web, thì ví dụ này sẽ chứa ba cấp độ cùng một lúc. Bằng cách sử dụng lớp giả:con duy nhất, ký hiệu “+” được thêm vào các mục để biểu thị sự hiện diện của menu con.

Nhìn chung, một ví dụ tốt và đơn giản. Chúng tôi sẽ không mô tả chi tiết quá trình thực hiện, bởi vì... nó tương tự như những cái trước - đầu tiên bạn tạo một khung HTML, sau đó dần dần thêm các kiểu cho nó. Tải xuống mã cuối cùng bằng liên kết tới nguồn; bạn có thể xem một phần mã đó trong Codepen:

Tổng cộng

Ở trên, chúng tôi đã xem xét 4 tùy chọn về cách tạo menu thả xuống bằng CSS + HTML, mặc dù có nhiều ví dụ tương tự khác trên Internet. Có các giải pháp với jQuery, nhưng điều này rất có thể chỉ hữu ích khi triển khai một số hiệu ứng đặc biệt và các tác vụ không chuẩn. Trong hầu hết các trường hợp, sự kết hợp giữa CSS + HTML là đủ, đặc biệt vì hiện nay yêu cầu chính đối với menu là sự tiện lợi và tốc độ tải nhanh.

Cuối cùng, hai lưu ý về các mã trên. Một số ví dụ sử dụng hình ảnh trong CSS cho menu thả xuống, vì vậy bạn sẽ cần xem xét cẩn thận đường dẫn hình ảnh và cung cấp các giá trị chính xác cho trang web của mình. Thứ hai, một số giải pháp đã có tuổi đời 2-3 năm, vì vậy bạn nên kiểm tra thêm hiệu suất của chúng một lần nữa trên các trình duyệt khác nhau.

Nếu bạn biết bất kỳ cách triển khai hiện đại thú vị nào khác về menu thả xuống ngang cho một trang web, hãy gửi liên kết trong phần nhận xét.

Đặc điểm kỹ thuật Mô tả

Thẻ nhằm mục đích hiển thị danh sách các mục menu. Tương tự với Tag và

.

Trong HTML4 thẻ đã trở nên lỗi thời, nên sử dụng thẻ thay thế
- Nhà bếp Nga. Súp Burlatskaya
- Thực phẩm Ucraina. Vareniki
- Ẩm thực Moldavia. ớt bột
- Nhà bếp của người da trắng. Súp kharcho
- Ẩm thực vùng Baltic. Vertinyai
- Mới... Mở... Lưu
- Sao chép Cắt Dán