Menu thả xuống html đơn giản. Menu thả xuống trong HTML và CSS
Từ tác giả: Xin chào mọi người. Vì một số lý do, quản trị viên web liên kết các menu thả xuống với các tập lệnh, nhưng trong một thời gian dài, việc điều hướng như vậy có thể được thực hiện hoàn toàn dễ dàng bằng cách sử dụng CSS thuần túy. Hơn nữa, một thực đơn như vậy sẽ không tệ hơn. Hôm nay mình sẽ hướng dẫn các bạn tạo dropdown menu trong css. Có thể nói, tôi sẽ chia sẻ công thức.
Kế hoạch bài học và cách bố trí thực đơn của chúng tôiNói chung, trước tiên hãy quyết định cách chúng ta sẽ tạo menu. Trong html5, cách tiêu chuẩn là tạo nó trong vùng chứa điều hướng bằng danh sách có dấu đầu dòng. Hãy làm điều đó thôi. Chúng tôi sẽ xóa các điểm đánh dấu sau bằng cách sử dụng css; chúng tôi hoàn toàn không cần chúng trong menu.
Thực ra, tôi sẽ viết ngay đánh dấu bằng các danh sách lồng nhau trong html. Nghĩa là, danh sách của chúng tôi sẽ có hai cấp độ - nó sẽ chứa các danh sách khác. Cụ thể, mỗi mục có 1 danh sách sẽ tạo thành một menu thả xuống.
Có một điểm quan trọng ở đây, đó là bạn có thể không cần phải thả xuống mọi mục mà chỉ cần một số mục. Không vấn đề gì, khi đó trong các mục không có danh sách thả xuống, chúng tôi chỉ đơn giản là không tạo danh sách lồng nhau.
Trên thực tế, đây là tất cả các đánh dấu:
< nav id = "nav" > < ul > < li > < a href = "#" >Đoạn 1< / a > < ul class = "second" > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < / ul > < / li > < li > < a href = "#" >điểm 2< / a > < ul class = "second" > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < / ul > < / li > < li > < a href = "#" >Điểm 3< / a > < ul class = "second" > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < / ul > < / li > < li > < a href = "#" >Điểm 4< / a > < ul class = "second" > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < li > < a href = "#" >Mục con< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Tôi hiểu rằng nó rất lớn. Đây là vấn đề với các danh sách lồng nhau, đó là bạn cần phải viết rất nhiều mã. Nhưng hãy nhớ thực tế là chúng tôi đang đưa ra 4 điểm chính và đối với mỗi điểm sẽ có một menu thả xuống.
Trên thực tế, tôi đã đặt cho toàn bộ điều hướng một mã định danh của điều hướng và tất cả các danh sách lồng nhau đều có một lớp kiểu thứ hai để hiểu rằng chúng được lồng nhau.
Tuyệt vời, chúng tôi đã chuẩn bị sẵn phần đánh dấu, bạn có thể xem kết quả:
Vâng, nó trông thật khủng khiếp. Nhưng bây giờ chúng tôi sẽ kích hoạt css và trong vài phút nữa, điều hướng của chúng tôi sẽ được chuyển đổi. Chúng ta hãy làm việc.
Viết các kiểu CSSĐiều đầu tiên tôi sẽ làm là đặt lại tất cả phần đệm về mặc định cho tất cả các thành phần. Chúng sẽ chỉ cản trở chúng ta; tốt hơn là chúng ta nên tự thiết lập các vết lõm sau này, khi cần thiết.
*(lề: 0; phần đệm: 0; )
lề: 0; phần đệm: 0; |
#nav( chiều cao: 70px; ) #nav ul( kiểu danh sách: không có; )
#nav( chiều cao: 70px; #navul( danh sách - kiểu : không có ; |
Bây giờ chúng ta cần thực sự quyết định thực đơn của chúng ta sẽ là gì. Ngang hay dọc? Tôi khuyên bạn nên thực hiện theo chiều ngang trước và xem mọi thứ trong ví dụ của nó. Để làm điều này, bạn cần phải viết các phong cách sau:
#nav > ul > li( float: trái; chiều rộng: 180px; vị trí: tương đối; )
#nav > ul > li( nổi: trái; chiều rộng: 180px; vị trí: tương đối; |
Lưu ý rằng việc sử dụng dấu > chúng ta đề cập đến danh sách các mục được lồng trực tiếp trong ul, được lồng trực tiếp trong nav. Điều này rất quan trọng vì nó ngăn cản việc áp dụng kiểu dáng cho các mục danh sách lồng nhau. Thực tế là, theo ý tưởng của tôi, các mục trong danh sách chính sẽ được đặt theo chiều ngang và các mục được lồng vào nhau – theo chiều dọc.
Nhưng tất nhiên, bạn có thể làm khác đi, phù hợp với ý tưởng của mình. Bạn có thể đảm bảo rằng tất cả các điểm đều nằm trên một dòng.
Dù sao, đoạn mã trên tôi hy vọng bạn có thể hiểu được. Nó buộc các mục trong danh sách chính bị đẩy sang trái để tất cả chúng xuất hiện trên cùng một dòng, mặc dù chúng là các phần tử khối. Tôi cũng cung cấp cho họ chiều rộng rõ ràng và vị trí tương đối.
Tại sao phải định vị? Điều này là cần thiết để định vị chính xác các danh sách lồng nhau. Nếu bạn đã nghiên cứu cách định vị trong CSS, thì bạn có thể biết rằng nếu bạn đặt vị trí tương đối cho một khối, thì tất cả các phần tử trong đó có thể được định vị tuyệt đối bên trong khối cụ thể này chứ không phải toàn bộ cửa sổ trình duyệt.
Trong thời gian chờ đợi, đây là những gì chúng tôi có cho đến nay:
Từ ảnh chụp màn hình này, bạn có thể hình dung được kết quả gần đúng. Tất nhiên, chúng ta vẫn phải thiết kế các món đồ sao cho đẹp mắt để mắt không khỏi xót xa khi xem điều hướng.
#nav li a( display: block; nền: #90DA93; đường viền: 1px Solid #060A13; color: #060A13; đệm: 8px; căn chỉnh văn bản: giữa; trang trí văn bản: none; ) #nav li a:hover( nền: #2F718E; )
#navli a( hiển thị: khối; nền : #90DA93; đường viền : 1px liền khối #060A13; màu : #060A13; phần đệm: 8px; văn bản - căn chỉnh: giữa; trang trí văn bản : không có ; #nav li a:hover( nền: #2F718E; |
Đầu tiên, bản thân các liên kết cần phải được tạo thành khối. Điều này là cần thiết để phần đệm hoạt động và tất cả các thuộc tính được áp dụng chính xác. Tiếp theo, tôi chỉ định màu nền, văn bản, tham số khung, phần đệm bên trong và căn chỉnh văn bản ở giữa. Cuối cùng, tôi hoàn tác việc gạch chân các liên kết.
Tất cả các tham số này không cần phải được chỉ định theo cách tôi đã làm. Bạn có thể chọn màu tùy ý, làm khung khác hoặc hoàn toàn không sử dụng, phần thụt lề có thể giảm hoặc tăng.
Xin lưu ý rằng trong trường hợp này chúng tôi không sử dụng dấu >, vì vậy các quy tắc trên sẽ áp dụng cho tất cả các liên kết, kể cả các liên kết trong các đoạn văn lồng nhau. Vì vậy bây giờ chúng ta có những điều sau đây:
Tuyệt vời, nhưng bạn hiểu rằng các mục phụ sẽ không hiển thị, chúng sẽ mở khi bạn di chuột qua mục mong muốn. Không có cái này, menu của chúng ta trông giống như một cái bàn. Chà, đã đến lúc ẩn các mục lồng nhau.
#nav li .second( hiển thị: không có; vị trí: tuyệt đối; trên cùng: 100%; )
#nav li .second( không trưng bày; vị trí: tuyệt đối; trên cùng: 100%; |
Đầu tiên, chúng tôi ẩn các danh sách lồng nhau hoàn toàn. Thứ hai, chúng tôi cung cấp cho họ vị trí tuyệt đối và tọa độ trên cùng: 100%. Điều này có nghĩa là menu thả xuống sẽ xuất hiện rõ ràng bên dưới mục chính mà nó thuộc về, rõ ràng ở 100% chiều cao của mục đó.
Bây giờ chúng ta chỉ thấy menu chính trên trang web, đó là thứ chúng ta cần.
Hãy thực hiện việc bỏ họcĐiều còn lại chúng ta phải làm là điều quan trọng nhất - nhận ra chính sự sa ngã. Không có gì phức tạp về nó, hãy nhìn vào mã này:
#nav li:hover .second( display: block; )
#nav li:hover .second( hiển thị: khối; |
Mã này sẽ hoạt động hoàn hảo. Khi bạn di chuột qua một mục menu chính, danh sách phụ sẽ hiển thị. Hơn nữa, chỉ có danh sách được lồng trong mục mà con trỏ đang di chuột qua.
Chỉ có một vấn đề nhỏ - chiều rộng của các mục lồng nhau không khớp với chiều rộng của các mục chính. Nhưng điều này có thể được giải quyết rất dễ dàng bằng cách thêm các kiểu thích hợp:
#nav li li( width: 180px; )
#navlili( chiều rộng: 180px; |
Thế là xong, vấn đề đã được giải quyết:
Mọi thứ hoạt động hoàn hảo. Khi bạn di chuột qua mục chính, menu thả xuống tương ứng với mục đó sẽ xuất hiện. Nếu bạn di chuyển con trỏ sang một bên, nó sẽ biến mất. Nếu bạn di chuyển con trỏ đến các mục lồng nhau, bạn có thể nhấp vào chúng và đi đến phần mong muốn của trang web. Vì vậy, chúng tôi đã tạo cho bạn một menu thả xuống rất đơn giản và nhẹ, hoàn toàn không có tập lệnh.
Chuyển menu sang dạng dọcĐược rồi, chúng ta đã hoàn toàn tìm ra điều hướng ngang, nhưng bên cạnh đó, điều hướng dọc rất thường được tìm thấy trên các trang web và nó cũng có thể là một điều hướng thả xuống. Thực tế, việc thay đổi menu từ ngang sang dọc rất dễ dàng, chúng ta chỉ cần thay đổi một vài dòng mã.
Trước tiên, bạn cần xóa float:left khỏi các mục trong danh sách chính. Thuộc tính này đảm bảo rằng các mục của chúng ta được hiển thị trên một dòng, nhưng tại sao chúng ta lại cần điều này nếu điều hướng phải theo chiều dọc?
Bây giờ tất cả những gì còn lại là thay đổi các quy tắc cho bộ chọn #nav li .second, nghĩa là đối với các danh sách lồng nhau, cụ thể là, chúng cần được định vị hơi khác một chút. Như thế này:
#nav li .second( hiển thị: không có; vị trí: tuyệt đối; bên trái: 100%; trên cùng: 0; )
#nav li .second( không trưng bày; vị trí: tuyệt đối; trái: 100%; trên cùng: 0; |
Tức là cần phải đăng ký hai tọa độ thay vì một. Đầu tiên, trong trường hợp điều hướng ngang, tôi đã nói rằng, theo kế hoạch, các mục menu con sẽ được hiển thị bên dưới các mục chính. Trong trường hợp menu dọc, điều này không phù hợp - các mục sẽ được hiển thị ở bên cạnh.
Vì vậy, chúng ta thay đổi top: 100% thành left: 100%. Ngoài ra, chúng ta cũng cần tọa độ trên cùng. Chúng tôi đặt nó thành 0 để menu con ở cùng cấp với mục mà nó tương ứng.
Thế là xong, bây giờ mọi thứ đều hoạt động như bình thường. Bạn có thể kiểm tra nó. Như bạn có thể thấy, tôi đã không nói dối khi nói rằng tôi sẽ chỉ phải viết lại một vài dòng mã.
Menu ngang với nhiều cấp độSử dụng cách tiếp cận tương tự, bạn có thể tạo nhiều cấp độ menu hơn nếu cần. Ví dụ: hãy tạo một danh sách cho mục thứ tư của menu chính, mục này sẽ được lồng vào một trong các mục phụ.
Mikhail Thứ bảy, 20/09/2014 - 12:28
Bằng cách nào đó bình luận của tôi không hiển thị - tôi sao chép nó:
===========
Cảm ơn bạn, nhưng đối với tôi (trong Int.Expl-8), menu không thả xuống. Những thứ kia. Dòng "ul.nav li:hover ul (display: block;)" không hoạt động
Nói cho tôi biết, có chuyện gì thế?
Có những mong muốn về việc trình bày tài liệu:
Sẽ rất thú vị khi giải thích trong dòng này (ul.aaaaa li:hover ul (display: block;)) phần nào chịu trách nhiệm về “menu thả xuống” và phần nào chịu trách nhiệm ẩn các mục ở sâu hơn. mức độ lồng nhau
Sẽ rất tốt nếu cung cấp cho mỗi dòng trong các ví dụ một nhận xét về chức năng của nó.
Đặc biệt, không rõ tại sao dòng "
Trước dòng này có 2 dòng, hình như không liên quan (Trang chủ
và Xem menu dọc). Phải là một người chưa quen với tài liệu mới (tức là chính xác tài liệu mà bạn đã viết) mới nhận ra rằng những dòng này cho menu thả xuống là không cần thiết. Hay chúng vẫn cần thiết?
Tiêu đề trong ví dụ của bạn có 3 dòng. Trong số này, chỉ có một cái liên quan đến chủ đề (đặt tên cho tệp CSS), còn 2 cái còn lại thì không. Điều này cũng gây khó khăn cho việc nắm vững tài liệu. Hơn nữa, trên máy tính của tôi, tiêu đề như vậy thường dẫn đến hiển thị văn bản không chính xác, vì tôi cần đặt không phải “utf-8”, mà là “Windows-…”
Trong ví dụ này không rõ ràng rằng các từ "style.css", "block-menu" và "nav" không phải là từ khóa mà là tên do người dùng xác định. Tôi đã tìm ra điều này bằng thực nghiệm
Nói tóm lại, tôi muốn các ví dụ chỉ chứa những gì có liên quan và những dòng không rõ ràng về ngữ cảnh sẽ được viết về chính xác mức độ “phù hợp” mà chúng có.
- Đăng nhập để để lại bình luận
Oleg Thứ bảy, 20/09/2014 - 23:50
Bình luận nhiều nhất!!!
Nhận xét chỉ được xử lý sau khi được kiểm duyệt, đó là lý do tại sao bạn không thấy nhận xét của mình ngay lập tức.
Tôi sẽ cố gắng trả lời mọi thứ. Hãy bắt đầu bằng cách hỏi tại sao điều này lại ở đây. Vâng, có hai liên kết bị rò rỉ từ phiên bản đang hoạt động.
Về việc hiển thị văn bản không chính xác. Bạn có thể đọc và bình luận trên trang này mặc dù thực tế là mã hóa của nó giống với ví dụ trong bài viết.
Bài đăng này không dành cho người mới bắt đầu và được viết theo yêu cầu của người đăng ký. Nếu bạn giải thích hoàn toàn mọi thứ, bạn sẽ cần nói về các lớp và mã định danh, khối, định vị, bộ chọn giả, tầng, v.v. Đây sẽ là một bài viết khá dài và quan trọng nhất là vô ích.
ul.nav li:hover > ul (display: block;) sẽ hiển thị mục bị ẩn trước đó. Nếu chúng ta xem xét từng chữ cái một thì (ở đây chúng ta xem xét mã song song) khi bạn di chuột qua mục menu (ul.nav li), thao tác sau sẽ hoạt động: di chuột và danh sách lồng nhau đầu tiên >ul sẽ hiển thị do thực tế là giá trị hiển thị sẽ thay đổi từ không thành chặn.
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 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
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 : trái ; 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 một 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.
Từ lâu tôi đã muốn viết một bài về cách tạo menu con bằng CSS. Nhiều người làm điều đó trong JQuery và kết quả khá tốt, tuy nhiên, tôi sẽ phác thảo toàn bộ nguyên tắc cơ bản của việc tạo menu con trong CSS tại đây. Và sau đó, bắt đầu từ cơ sở này, bạn có thể cải thiện thêm menu con.
Đây là mã CSS ngay lập tức:
* html ulli (
nổi: trái;
}
* html ulli a (
chiều cao: 1%;
}
ul(
viền dưới: 1px liền khối #000;
kiểu danh sách: không có;
lề: 0;
phần đệm: 0;
chiều rộng: 100px;
}
ulli (
vị trí: tương đối;
}
ulli a (
hiển thị: khối;
đường viền: 1px liền khối #000;
viền dưới: 1px;
phần đệm: 5px;
trang trí văn bản: không có;
}
li ul (
không trưng bày;
trái: 99px;
vị trí: tuyệt đối;
trên cùng: 0;
}
li:di chuột ul (
hiển thị: khối;
}
Điều quan trọng nhất ở đây là bộ chọn "li:hover ul". Trong thực tế, nó hiển thị nội dung của menu. Theo mặc định, đó là "display: none" và khi bạn di chuột qua một mục menu, menu con sẽ trở thành: "display: block", nghĩa là hiển thị. Nó là quan trọng nhất. Ngoài ra, trong hai bộ chọn đầu tiên (những bộ có * ) có một bản hack CSS cho IE, nếu không sẽ không có gì hoạt động trong trình duyệt này nếu không có nó. Mọi thứ khác đều là ngoại hình, tất nhiên, có thể thay đổi được.
Đây là mã HTML:
Nếu bạn suy nghĩ cẩn thận về cấu trúc này, mọi thứ sẽ trở nên rất rõ ràng. Thẻ ul tạo ra một menu. Nếu ul nằm trong một ul khác thì đó đã là một menu con. Và thẻ li chịu trách nhiệm cho một mục menu cụ thể.
Tất nhiên, menu là đơn giản nhất, cả về logic, cấu trúc cũng như về mặt thiết kế. Tất nhiên, bạn có thể thực hiện một cách dễ dàng bằng cách sử dụng JQuery. Bạn cũng có thể thay đổi thiết kế, nhưng toàn bộ nguyên tắc sẽ giữ nguyên như trong menu con được viết bằng CSS và HTML này.
