Hãy xem những gì đã xảy ra:

Ví dụ này có thể được tìm thấy.

Tạo kiểu nhãn

Tất nhiên, mọi thứ có thể được sử dụng thay vì mở / đóng dữ liệu. Ví dụ: thêm một phông chữ biểu tượng.

Nút chuyển đổi: sau (font-family: "fontello"; content: "\ e804"; cursor: pointer; padding: 15px; font-size: 1.5em; text-align: center;) # menu-checkbox: check + .main-menu .toggle-button: after (content: "\ e804";)

Hoặc một biểu tượng cùng với văn bản giải thích:

Ở đây chúng ta lấy giá trị của các thuộc tính đóng / mở dữ liệu, hiển thị dữ liệu trước đó và thêm chính biểu tượng bằng cách sử dụng phần tử giả sau.

Nút chuyển đổi: trước (content: attr (data-close); font-size: 1rem; position: rel; right: 3px; bottom: 3px;) .toggle-button: after (content: "\ f0c9"; font- family: "FontAwesome"; display: inline-block;) # menu-checkbox: check + nav [role = "navigation"] .menu (display: block;) # menu-checkbox: check + nav [role = "navigation" ] .toggle-button: after (content: "\ f0c9"; font-family: "FontAwesome"; color: green;) # menu-checkbox: check + nav [role = "navigation"] .toggle-button: before ( màu xanh lá cây ; )

Trong hai ví dụ cuối cùng, người đọc sẽ phải chơi với vị trí của các biểu tượng và vị trí của chính văn bản.

Người ta không nên mong đợi bất kỳ hiệu ứng đáng kinh ngạc nào từ việc triển khai menu như vậy, mặc dù không nên quên khả năng của hoạt ảnh CSS.

Xin chào bạn bè, đồng nghiệp! Bạn khỏe không? Tôi hy vọng mọi người đang làm tốt :) Hôm nay chúng ta sẽ làm một menu thích ứng cho trang đích của chúng tôi. Ngày càng có nhiều người hỏi về điều này, và tôi viết ra những câu hỏi như vậy trong thời gian rảnh và cố gắng viết bài về những chủ đề này.

Cảm ơn bạn đã mang đến những ý tưởng mới và giúp phát triển blog. Nhân tiện, bạn muốn đọc bài tiếp theo về chủ đề nào? Xin vui lòng viết trong các ý kiến, đối với tôi nó là rất quan trọng. Và bây giờ, hãy bắt đầu ...

Cách tạo menu đáp ứng cho trang web

Google đã xác nhận rằng từ giữa tháng 4, một trong những yếu tố xếp hạng sẽ là khả năng thích ứng của trang web đối với thiết bị di động. Về vấn đề này, tất cả các tài liệu về cách làm cho trang đích của bạn thích ứng đều có liên quan hơn bao giờ hết. Hôm nay tôi sẽ không bận tâm đến những thứ phức tạp, mà ngược lại, tôi sẽ cho bạn biết cách làm một thực đơn thích ứng cực kỳ đơn giản với thời gian tối thiểu.

Về cơ bản nó sẽ là html + css, nhưng bạn sẽ cần một tập lệnh rất nhỏ để xử lý nhấp chuột. Vì thế…

Menu ngang đáp ứng

Hãy bắt đầu với html. Trước hết, hãy bao gồm thư viện jquery. Có thể bạn đã sử dụng nó trong một thời gian dài, vì vậy hãy đảm bảo rằng bạn không kết nối nó lần thứ hai:

Bây giờ là đánh dấu. Một danh sách không có thứ tự thông thường và một div nhỏ có chứa biểu tượng menu. Nó sẽ chỉ hiển thị ở độ phân giải thấp.

Như bạn có thể thấy - không có gì phức tạp, tôi nghĩ, khi cần thiết, bản thân bạn có thể cải thiện nó.
Bây giờ hãy thêm các kiểu:

#menu (background: # 2ba9c0; width: 100%; padding: 10px 0; text-align: center;) #menu a (color: #fff; text-decoration: none; padding: 12px 12px;) #menu a: di chuột (border-bottom: 4px solid #fff; background: # 078ecb;) .itemsMenu li (display: inline; padding-right: 35px; width: 100%; margin: 0 auto;) .itemsMenu li img (vertical-align : middle; margin-right: 10px;) .iconMenu (color: #fff; cursor: pointer; display: none;) .showitems (display: block! important;) @media screen and (max-width: 600px) (# menu a (padding-bottom: 13px;) #menu a: hover (border-bottom: none;) .iconMenu (display: block;) .itemsMenu (display: none;) .itemsMenu li (display: block; padding: 10px 0;))

Bây giờ, khi bạn giảm cửa sổ trình duyệt, bạn sẽ thấy hình ảnh sau:

Tôi thực sự ghét phải mô tả từng dòng, bởi vì blog không phải là về bố cục như vậy. Hãy để tôi chỉ cố gắng giải thích.

Đầu tiên, chúng tôi đặt thuộc tính display: inline cho các phần tử li để làm cho chúng nằm theo chiều ngang cạnh nhau. Có thể sử dụng float: left, nhưng tôi quyết định làm theo cách này. Và ẩn biểu tượng menu với thuộc tính display: none. Khi độ phân giải màn hình nhỏ hơn 600 pixel, hãy xóa nội tuyến khỏi các phần tử li và ẩn chúng và hiển thị biểu tượng. Tóm lại, có.

Bây giờ chúng ta cần một tập lệnh đơn giản sẽ xử lý một cú nhấp chuột vào biểu tượng menu và hiển thị các phần tử của nó:

$ (function () ($ (". iconMenu"). click (function () (if ($ (". itemsMenu"). is (": display")) ($ (". itemsMenu"). removeClass (" showitems ");) else ($ (". itemsMenu "). addClass (" showitems ");)));));

Như thế này. Tôi đã chuyển nó sang một tệp riêng biệt và đưa nó vào trước thẻ đóng nội dung.

Đó là tất cả. Do đó, bạn có thể nhanh chóng tạo một menu thích ứng đơn giản cho trang đích.

Tất nhiên, có những bất lợi. Lề được đặt bằng pixel, nhưng bạn có thể đặt tất cả các khoảng cách dưới dạng phần trăm. Nó chỉ là không cần thiết. Nếu đó là một trang web chính thức, thì tôi sẽ sử dụng các biểu tượng bằng svg hoặc phông chữ, không phải png và tôi sẽ tính số thụt lề dưới dạng phần trăm. Và vì vậy, đó là một ngẫu hứng nhỏ :) Tôi hy vọng mọi thứ rõ ràng? Từ biệt.

Cổng thông tin với các menu phức tạp. Chúng tôi quyết định chỉ viết script nếu chúng tôi không tìm thấy thứ chúng tôi cần trên mạng. Một số định hướng khác nhau với các tính năng khác nhau đã được hình thành. May mắn thay, chúng tôi đã tìm thấy hầu hết mọi thứ, ngoại trừ một. Tuy nhiên, ngay trước khi bắt đầu viết menu này, chúng tôi vẫn tìm được thứ mình cần.
Đã thử khá nhiều menu thích ứng. Trong chủ đề này, tôi quyết định lựa chọn những thứ đáng giá và thú vị nhất trong số những thứ mà chúng ta phải thử. Tất cả các menu thích ứng không tương tự nhau và được thiết kế dành riêng cho các nhiệm vụ cụ thể.
Vì thế. Sự chú ý của bạn 5 menu thích ứng cho tất cả các dịp.

flexMenu

Mã một menu điều hướng đáp ứng

Menu phẳng nhiều cấp - Điều hướng đáp ứng

Một menu thích ứng cho một trang web hiện đại không chỉ là một thứ xa xỉ mà còn là một điều cần thiết. Sự phong phú của các thiết bị hiện đại đòi hỏi quản trị viên web phải có một bố cục hiển thị hợp lý trên các màn hình có độ phân giải khác nhau. Và trong một số trường hợp, việc tạo một menu thích ứng khó hơn nhiều so với bản thân thiết kế, đó là lý do tại sao vấn đề này cần được xem xét.

Menu màn hình lớn

Để hiểu bố cục menu tổng thể, trước tiên bạn cần tạo cấu trúc menu bằng HTML và tạo kiểu bằng CSS. Sau đó, dựa trên tài liệu đã nhận, bạn có thể cải thiện mẫu thích ứng. Vì vậy, cấu trúc HTML sẽ như thế này.

Bạn sẽ cần thêm các kiểu CSS vào menu kết quả. Họ nên chỉ định kích thước và màu sắc của phông chữ, nền, vị trí của các khối.

Quá trình thích ứng

Tạo chức năng đơn giản cho một màn hình máy tính bình thường là một vấn đề đơn giản và điều này có thể được thấy bằng một ví dụ. Menu thích ứng cho một trang web chỉ được tạo khi có thứ gì đó để làm việc, tức là khi các mục điều hướng đã được thêm vào. Tùy chọn menu tối ưu nhất cho thiết bị di động và máy tính bảng sẽ là biểu tượng bánh hamburger - một trường hình vuông trong đó có ba ô. Khi được nhấn, tất cả các mục menu sẽ mở ra. Để tạo điều hướng như vậy, các thẻ phải được thêm vào tài liệu HTML.

Tiếp theo, bạn sẽ cần thêm các kiểu phù hợp vào các thẻ này để có được một menu trực quan hấp dẫn và dễ đọc. Ngoài thiết kế trực quan của điều hướng và biểu tượng menu, bạn cần tạo kiểu cho vị trí của hình ảnh cho phù hợp. Vì vậy, điều kiện menu_icon span: nth-child (1) (top: 0 px); được giới thiệu. Tức là, phần thụt vào của hình ảnh từ phía trên sẽ là không pixel. Tương tự, bạn cần đặt giá trị cho các mặt khác.

Bây giờ menu đáp ứng gần như đã sẵn sàng. Cần chú ý đến điều kiện Theo mặc định, biểu tượng menu sẽ không hiển thị trên trang web, vì vậy bạn cần thêm một lớp bổ sung vào tài liệu CSS với điều kiện sau: .menu__icon (display: inline-block;). Điều này sẽ làm cho điều hướng hiển thị.

Ngoài ra, bạn cần thêm một nhiệm vụ vào biểu định kiểu xếp tầng sẽ ẩn các đoạn văn và đoạn văn bản con khi cần thiết. Để làm được điều này, trong CSS bạn cần đặt vị trí menu cố định, sắp xếp hiển thị và căn chỉnh. Các mục được ẩn bằng điều kiện tràn: auto; độ mờ: 0; chỉ số z: 1000. Bạn cũng có thể thêm class menu__links-item, sẽ chỉ định kiểu cho các mục menu, nhưng điều này đã có theo yêu cầu của nhà phát triển.

Chi tiết cuối cùng

Như vậy, menu CSS đáp ứng gần như đã hoàn thành. Để nó được hiển thị khi nhấp vào biểu tượng, bạn cần thêm các chức năng. Để đơn giản hơn, bạn nên sử dụng jQuery, nhưng nếu muốn, bạn có thể tạo JavaScript thuần túy. Cả ở đó và ở đó cùng một điều kiện sẽ được sử dụng:

• (function ($) ($ (function () $ (". menu__icon"). on ("click", function () $ (this) .closest (". menu"). toggleClass ("menu_state_open");)) ;));)) (jQuery).

Điều này hoàn thành bố cục của điều hướng thích ứng. Nhưng đây chỉ là một trong số các tùy chọn để tạo loại chức năng này, vì vậy nó đáng để xem xét các tùy chọn khác. Ít nhất một vài trong số họ.

Không thay đổi tiêu chuẩn

Hầu hết người dùng Internet đều mong đợi thấy một thanh điều hướng ở đầu trang web. Đây đã trở thành một loại tiêu chuẩn, vì vậy menu ngang thích ứng phải có giao diện đẹp. Nó có thể được thực hiện bằng cách sử dụng CSS, như trong các ví dụ trên, hoặc bằng cách kết nối một tập lệnh xử lý. Nói chung, tạo một menu thích ứng bao gồm 3 bước:

1. Viết thẻ HTML
2. Tạo kiểu cho chúng bằng Trang tính kiểu xếp tầng (CSS).
3. Sự thích nghi của một menu hiện có.

Đương nhiên, tất cả các trang web đều có thanh menu riêng, nhưng nếu tài nguyên được tạo trên CMS, thì việc tạo menu thích ứng mới sẽ dễ dàng hơn nhiều.

Bootstrap

Tạo chức năng đáp ứng không phải là một vấn đề lớn nếu bạn sử dụng các công cụ của Bootstrap. Các mẫu để tạo menu ngang đã được đặt sẵn ở đây. Bạn chỉ cần kết nối với tệp tài nguyên bootstrap.js. Với sự trợ giúp của khung này, quản trị viên web có cơ hội tạo điều hướng ở mọi mức độ phức tạp. Menu đáp ứng với Bootstrap được tạo bằng một số mã.

Các tính năng của phương pháp

Hãy để đoạn mã này rườm rà, nhưng có thể hiểu được. Điều đáng chú ý là vai trò chính ở đây được thực hiện bởi thẻ. nav, chịu trách nhiệm tạo điều hướng và giao diện của nó. Các thùng chứa cũng được bao gồm ở đây. thùng chứa chất lỏng và thùng đựng hàng, thiết lập chiều rộng của các mục. Với sự giúp đỡ của họ, bạn có thể làm cho menu mở rộng trên các màn hình có độ phân giải khác nhau hoặc để nó cố định.

Các lớp đóng một vai trò quan trọng trong việc tạo ra chức năng thích ứng. sụp đổ và điều hướng-thu gọn, chịu trách nhiệm về phong cách. Bản thân menu được tạo ra bằng cách viết ra các mục được đặt theo chiều ngang.

Nếu bạn sử dụng mã khung này để tạo điều hướng, nó sẽ giống như một biểu ngữ ngang trên màn hình rộng. Tên của tài nguyên sẽ ở đầu, sau đó là các mục trong một trình tự được chỉ định chặt chẽ. Màn hình hẹp sẽ chỉ hiển thị tên trang web và biểu tượng bánh hamburger, khi được nhấp vào sẽ hiển thị các mục menu trong danh sách dọc.

Trình đơn thả xuống

Tài nguyên Bootstrap sẽ là một trợ giúp đắc lực để tạo menu thả xuống đáp ứng. Để làm điều này, chỉ cần thay thế dòng thẻ

Điều này có thể được thực hiện cho cả một mục và cho nhiều mục. Một mũi tên chỉ xuống sẽ xuất hiện bên cạnh vị trí có các mục phụ thả xuống. Khi nhấp vào, danh sách đã tạo sẽ xuất hiện. Nếu điều hướng được hiển thị trên một màn hình nhỏ, thì mục có danh sách thả xuống cũng sẽ được biểu thị bằng một mũi tên, nhưng có hướng bên phải. Khi được nhấp vào, một danh sách các mục con theo chiều dọc sẽ xuất hiện.

Menu đa cấp

Tuy nhiên, bạn có thể tạo không chỉ với Bootstrap. Nếu thư viện này không được bao gồm, bạn có thể tạo một menu đa cấp đáp ứng bằng cách sử dụng HTML và CSS, sau đó bao gồm hàm PHP.

Bước đầu tiên là tạo một danh sách không có thứ tự trong tệp HTML bao gồm các danh sách khác. Để làm điều này, hãy sử dụng các thẻ tiêu chuẩn

và
• . Chúng ta cũng không nên quên việc hình thành các lớp sẽ được xử lý thêm bởi CSS style sheet. Để làm rõ hơn, cần đưa ra một ví dụ nhỏ về việc viết danh sách và tạo lớp.

  Hoạt ảnh của menu thả xuống đáp ứng được đặt bằng cách sử dụng biểu định kiểu xếp tầng. Ở đây bạn cần xác định các thông số cho menu khi màn hình giảm 50, 75 và 25%. Cách tiếp cận này để tạo ra chức năng thích ứng cung cấp một bố cục có thẩm quyền, trong đó menu không "di chuyển ra ngoài".

  Và cuối cùng, bạn cần nhập chức năng được chỉ ra bên dưới trong tài liệu.

  Nếu trang web không nghĩ đến việc sử dụng bất kỳ chức năng nào khác ngoài chức năng này, thì bạn vẫn cần tạo một tài liệu tập lệnh riêng cho nó. Nếu bạn nhập nó bằng HTML thuần túy, nó sẽ chỉ được hiển thị trong cửa sổ trình duyệt như một phần của văn bản và sẽ không hoạt động.

  

  jQuery

  Ngoài ra, một giải pháp tuyệt vời sẽ là tạo một thanh điều hướng trên một plugin jQuery. Một menu thích ứng trên một dịch vụ như vậy được thực hiện chỉ trong vài phút. Bản thân plugin có thể được tải xuống từ Internet, nó có giao diện đơn giản và trực quan, dễ sử dụng. Vì vậy, sẽ không có vấn đề gì với việc kết nối tệp kiểu.

  Sau khi tệp kiểu được bao gồm, bạn cần viết một tập lệnh để tạo điều hướng thích ứng.

  

  Sau đó, bạn cần bố trí điều hướng, nếu nó chưa tồn tại. Ở đây mọi thứ hoạt động theo nguyên tắc: "Mọi thứ khéo léo là đơn giản." Trong tài liệu HTML, bạn cần tạo một danh sách có dấu đầu dòng trong thẻ nav. Bạn có thể sử dụng ví dụ đã được cung cấp trước đó hoặc phiên bản đơn giản của nó, trông giống như hình bên dưới.

  Ở giai đoạn làm việc này, chỉ có logo sẽ được hiển thị trong trình duyệt và bản thân menu sẽ bị ẩn đi. Để làm cho nó xuất hiện, bạn cần thêm một chức năng gây ra thay đổi plugin - okayNav.

  var navigation = $ ("# nav-main"). okayNav ();

  Bây giờ bạn có thể nhìn vào kết quả của công việc. Với chiều rộng cửa sổ trình duyệt bình thường, menu này trông hoàn toàn bình thường, nhưng nếu bạn giảm màn hình, các mục cuối cùng sẽ biến mất. Thay vào đó, ba chấm lớn xuất hiện, nằm theo chiều dọc. Khi được nhấn, chúng dường như lật lại, chiếm vị trí nằm ngang và các mục menu ẩn được hiển thị trong danh sách dọc ở góc trên bên phải của màn hình.

  

  Giải pháp này trông rất hiện đại và hiệu ứng hoạt ảnh có liên quan đặt tài nguyên ở nơi có ánh sáng thuận lợi trước mặt khách truy cập.

  Joomla

  Và tùy chọn cuối cùng để tạo menu thích ứng bằng hệ thống Joomla. Nó là một dịch vụ xây dựng trang web miễn phí là một hệ thống quản lý nội dung (CMS). Và như nó đã được đề cập ở phần đầu, nếu trang web được tạo bằng CMS và bạn cần thay đổi menu hiện có thành thích ứng, thì tốt nhất bạn nên bắt đầu tạo chức năng của trang web ngay từ thẻ đầu tiên. Cũng giống như trong các ví dụ trước, bạn cần tạo một danh sách menu có dấu đầu dòng trong HTML. Chỉ đối với mỗi mục bạn cần phải viết lớp của riêng bạn. Tổng cộng, mọi thứ trông giống như bên dưới.

  Tiếp theo, bạn cần thêm các kiểu. Tốt nhất là đặt tất cả padding thành 0 px và áp dụng box-sizing: border-box. Điều này sẽ giúp bạn có thể duy trì chiều rộng được chỉ định của các phần tử, bất kể khoảng đệm sẽ là bao nhiêu. Tiếp theo, đối với phần tử menu chính (div), bạn nên đặt chiều rộng thành 90% và sau đó bắt đầu tạo kiểu cho từng mục riêng lẻ.

  

  Bạn có thể loại bỏ các đường viền, thay đổi màu sắc và tô màu, tạo thiết kế sẽ xuất hiện khi di chuột qua. Nói một cách ngắn gọn, hãy làm mọi thứ phù hợp với thiết kế của tài nguyên. Bước cuối cùng trong việc tạo một menu Joomla đáp ứng là chuyển đổi nó. Thông thường, Joomla tạo một menu mà khi kích thước màn hình thay đổi, nó sẽ tự động được xây dựng lại, chia thành nhiều dòng. Tất cả điều này cũng được thực hiện trong CSS, chức năng duy nhất nên có là điều kiện trình duyệt chéo. Nó cho phép menu trông giống nhau trong các trình duyệt khác nhau.

  Tính năng trình duyệt chéo

  Tạo một menu thích ứng thực sự không dễ dàng, nó đòi hỏi kiến ​​thức và kinh nghiệm. Tất cả các ví dụ được mô tả chỉ là một phần nhỏ trong số các biến thể có thể có, nhưng thậm chí chúng có thể hữu ích nếu một người có kiến ​​thức cơ bản về HTML và CSS.