Thực đơn
trang chủInternet

Điều hướng thích ứng cho các menu. Tổng quan tuyệt vời về menu đa cấp đẹp mắt với codepen

Một menu thích ứng cho một trang web hiện đại không chỉ là một điều 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 tạo 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 đáp ứng khó hơn nhiều so với bản thân thiết kế, đó là lý do tại sao cần phải xem xét vấn đề này.

Menu cho màn hình lớn

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

Menu hai mục trong HTML

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

Quy trình tham gia

Việc tạo chức năng đơn giản cho màn hình máy tính thông thường rất đơn giản và có thể thấy điều này trong 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 mục được vẽ. Khi nhấn, tất cả các mục menu sẽ mở ra. Để tạo điều hướng như vậy, bạn cần thêm thẻ vào tài liệu HTML.

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

Bây giờ menu đáp ứng gần như đã sẵn sàng. Điều đáng chú ý là đ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 tác vụ vào biểu định kiểu xếp tầng để ẩn các đoạn văn và tiểu đoạn nếu cần. Để làm được điều này, bạn cần đặt vị trí menu cố định trong CSS, thiết kế cách hiển thị và căn chỉnh. Các mục được ẩn bằng cách sử dụng các điều kiện tràn:tự động; độ mờ: 0; chỉ số z: 1000. Bạn cũng có thể thêm lớp menu__links-item, lớp này sẽ chỉ ra kiểu cho các mục menu, nhưng đây là yêu cầu của nhà phát triển.

Chi tiết cuối cùng

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

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

Điều này kết thúc việc bố trí điều hướng thích ứng. Nhưng đây chỉ là một trong một số tùy chọn để tạo loại chức năng này, vì vậy, đá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

Phần lớn người dùng Internet mong muốn nhìn thấy thanh điều hướng ở đầu trang web. Điều nà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 mắt. Nó có thể được thực hiện bằng cách sử dụng CSS, cả trong các ví dụ nêu trên và bằng cách kết nối tập lệnh xử lý. Nói chung, việc tạo menu đáp ứng bao gồm 3 bước:

  • Viết thẻ HTML
  • Tạo kiểu cho chúng bằng cách sử dụng Cascading Style Sheets (CSS).
  • Điều chỉnh thực đơn 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.

    Khởi động

    Tạo chức năng đáp ứng không phải là vấn đề nghiêm trọng nếu bạn sử dụng công cụ Bootstrap. Các mẫu để tạo menu ngang đã được trình bày ở đây. Bạn chỉ cần kết nối với tài nguyên tệp 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 ở bất kỳ mức độ phức tạp nào. Một menu đáp ứng với Bootstrap được tạo bằng cách sử dụng một số mã.

    Đặc điểm của phương pháp

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

    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 ở đây. sụp đổ Và thu gọn thanh điều hướng người chịu trách nhiệm về phong cách. Bản thân menu được tạo 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ã đóng khung này để tạo điều hướng thì trên màn hình rộng, nó sẽ trông giống như một biểu ngữ nằm ngang. Lúc đầu sẽ có tên của tài nguyên, sau đó là các mục theo một trình tự được chỉ định nghiêm ngặt. Trên màn hình hẹp, chỉ hiển thị tên trang web và biểu tượng bánh hamburger, khi nhấp vào sẽ hiển thị các mục menu theo danh sách dọc.

    Trình đơn thả xuống

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

  • từ ví dụ trước sang mã bên dưới.

    Các mục thả xuống

    Điều này có thể được thực hiện cho một mục hoặc nhiều mục. Mũi tên chỉ xuống sẽ xuất hiện gần vị trí có các mục con thả xuống. Khi nhấn vào sẽ hiện ra danh sách đã tạo. Nếu điều hướng được hiển thị trên 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 sang phải. Khi nhấp vào, một danh sách các mục con dọc khác sẽ xuất hiện.

    Thực đơn đa cấp

    Tuy nhiên, bạn có thể tạo không chỉ bằng Bootstrap. Nếu thư viện này không được kết nối, bạn có thể tạo menu đa cấp đáp ứng bằng cách sử dụng HTML và CSS, sau đó kích hoạt chức năng PHP.

    Trước tiên, bạn cần 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, bạn nên sử dụng 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 mà sau này sẽ được xử lý bởi biểu định kiểu xếp tầng CSS. Để làm rõ hơn, cần đưa ra một ví dụ nhỏ về cách 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 chỉ đị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 nhằm tạo ra chức năng thích ứng đảm bảo bố cục phù hợp, trong đó menu không bị “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 vào tài liệu.

      Nếu trang web chưa 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 đặt nó ở dạng HTML đơn giản, nó sẽ chỉ xuất hiện 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.

      truy vấn

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

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

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

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

      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 độ rộng thông thường của cửa sổ trình duyệt, menu này trông hoàn toàn bình thường, nhưng nếu bạn thu nhỏ 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 dọc. Khi nhấn vào, 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ị theo danh sách dọc ở góc trên bên phải 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 sử dụng giúp tài nguyên có lợi cho 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. Đây là dịch vụ tạo trang web miễn phí, là hệ thống quản lý nội dung CMS. Và như đã đề cập ngay từ đầ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. Giống như trong các ví dụ trước, bạn cần tạo danh sách menu có dấu đầu dòng trong HTML. Chỉ với mỗi mục bạn cần viết lớp của riêng mình. Tổng cộng, mọi thứ trông như dưới đây.

      Tiếp theo bạn cần thêm phong cách. Tốt nhất là đặt tất cả phần đệm thành 0 px và áp dụng box-sizing: border-box. Điều này sẽ giúp duy trì độ rộng đã chỉ định của các phần tử, bất kể có bao nhiêu vết lõm. Tiếp theo, đối với thành phần 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ể xóa đường viền, thay đổi màu sắc và tô màu cũng như tạo một thiết kế sẽ xuất hiện khi bạn di con trỏ. Nói một cách dễ hiểu, hãy làm mọi thứ tương ứng với thiết kế của tài nguyên. Bước cuối cùng của việc tạo 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 thực hiện bằng CSS, chức năng duy nhất cần được đưa vào là điều kiện đa trình duyệt. Nó cho phép menu trông giống nhau trong các trình duyệt khác nhau.

      Chức năng đa trình duyệt

      Tạo một menu đáp ứng thực sự không hề 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òn có thể hữu ích nếu một người có kiến ​​thức cơ bản về HTML và CSS.

      Xin chào các bạn thân mến. Hôm nay tôi sẽ hướng dẫn bạn cách tạo menu phản hồi cho trang web. Chúng tôi sẽ tạo một menu ngang thích ứng với màn hình của thiết bị di động. Và tính linh hoạt của nó nằm ở chỗ, bất kể công nghệ tạo trang web của bạn là gì, menu này sẽ hoạt động trên bất kỳ trang web nào. Tức là chỉ cần sửa lại các liên kết, tên các mục menu và điều chỉnh kiểu dáng cho phù hợp với thiết kế của bạn là đủ.

      Trước đây, tôi đã xuất bản một bài viết mà tôi đã chia sẻ. Và hôm nay chúng ta sẽ xem xét một cách khác.

      Giao diện menu thông thường cho màn hình máy tính và màn hình lớn sẽ trông như thế này:

      Trên thiết bị di động, menu mở rộng sẽ xuất hiện như sau:

      Nguyên tắc xây dựng menu thích ứng phổ quát.

      Vì vậy, để tạo một menu như vậy, bạn sẽ cần:

    • Tạo khung html.
    • Áp dụng phong cách css.
    • Kết nối trình xử lý tập lệnh.

      • Tất nhiên, bạn có một menu trên trang web của mình và bạn muốn làm cho nó có tính thích ứng. Bạn có hai cách, cách thứ nhất là điều chỉnh menu hiện có và cách thứ hai là tạo menu thích ứng mới.

      Trên hầu hết các trang web được tạo trên CMS, việc tạo menu mới sẽ dễ dàng hơn là làm lại menu cũ. Vì bản thân việc xây dựng menu được triển khai thông qua PHP và các truy vấn cơ sở dữ liệu, nên các kiểu css nằm rải rác trong nhiều kiểu khác. Nhìn chung, toàn bộ quá trình thiết kế lại menu này là một công việc khá tốn công sức và công sức.

      Trên các trang web tự viết sẽ ít công việc chỉnh sửa hơn, nhưng bạn vẫn phải mày mò.

      Trong mọi trường hợp, bạn có thể sử dụng các kiểu và tập lệnh từ bài viết này và điều chỉnh menu của mình.

      Và để tạo một menu thích ứng mới, bạn sẽ cần rất ít thời gian. Ban đầu, một menu được tạo dựa trên thẻ ul và li, sau đó các kiểu css được thêm vào và tập lệnh được kết nối. Menu này tải và phản hồi nhanh hơn vì nó hoạt động mà không cần truy vấn cơ sở dữ liệu.

      Các kiểu CSS, để thuận tiện, được bao gồm trong các tệp riêng biệt. Mặc dù chúng có thể được bao gồm trong các kiểu trang web chính. Tôi sẽ đưa ra một ví dụ về cách kết nối các kiểu thông qua các tệp riêng biệt.

      Quá trình tạo menu thích ứng Bước 1. Tạo cấu trúc menu html.

      Bước đầu tiên là quyết định nơi menu sẽ được hiển thị. Để làm điều này, bạn cần phân tích các tệp mẫu của mình. Theo quy định, menu được hiển thị trong tiêu đề hoặc thanh trang web. Các tệp header.php và sidebar.php chịu trách nhiệm về các khối chính này của mẫu. Chính trong đó, bạn cần tìm nơi để chèn menu hoặc thay thế menu cũ. Đối với mỗi mẫu, đây là một quy trình riêng lẻ.

      Sau khi quyết định vị trí chèn menu mới, bạn cần đặt khung html này vào vị trí này và thay đổi các mục menu cũng như liên kết của riêng bạn.

      Kinh doanh trên Internet

      • trang chủ
      • Tác giả
      • Blog
      • Bài viết
      • Cổng vào
      • Sự đăng ký

      Lưu ý: Tôi đã sử dụng màu cam để biểu thị các thành phần bạn chỉnh sửa cho trang web của mình. Các mục menu có thể được thêm và xóa. Tôi sẽ chỉ cho bạn cách thực hiện việc này trong video hướng dẫn. Mã này chịu trách nhiệm về mũi tên menu thả xuống: . Nếu bạn có nhiều mục menu thả xuống, hãy sử dụng mã này.

      Bước 2. Kết nối các kiểu css.

      Để đơn giản hóa quy trình và không bị nhầm lẫn với , chúng tôi sẽ bao gồm các kiểu ở dạng tệp riêng biệt. Các file style được bao gồm trong file header.php giữa các thẻ …. Ít nhất đây là trường hợp của hầu hết các mẫu hiện đại.

      Nhiệm vụ của bạn là tìm nơi kết nối tệp kiểu chính style.css và bên dưới nó để kết nối các kiểu menu thích ứng.

      Nhưng trước tiên, bạn phải tải xuống các tệp có kiểu và tập lệnh. Sau đó, sao chép các tệp bootstrap.css và menu.css vào thư mục chủ đề của bạn. Và sau đó trong tệp header.php, giữa các thẻ HED, thêm các dòng kết nối sau:

      Bước 3. Kết nối thư viện jQuery và tập lệnh xử lý.

      Và để hoàn tất việc điều chỉnh menu, bạn cần thêm kết nối của thư viện jQuery và một tập lệnh sẽ mở menu khi được nhấp vào.

      Và mặc dù rất có thể bạn đã kết nối thư viện jQuery nhưng bạn sẽ thấy nó giữa các thẻ HED trong tệp header.php, để đề phòng, tôi sẽ chỉ cho bạn cách kết nối nó. Và đồng thời chúng tôi sẽ kết nối tập lệnh xử lý mà bạn đã tải xuống trong kho lưu trữ.

      Trong cùng một tệp header.php, trước khi đóng thẻ, hãy chèn các dòng mã sau:

      Lưu ý: tệp bootstrap.min.js, cùng với các kiểu, cũng cần được sao chép vào thư mục chủ đề trên trang web của bạn. Có lẽ chủ đề của bạn có thư mục JS, sau đó sao chép tệp này vào đó và đưa tệp này vào đường dẫn tệp.

      Vì vậy, mọi thứ đã sẵn sàng, bạn có thể kiểm tra kết quả. Truy vấn phương tiện được xây dựng ở điểm 768 px; ngay khi màn hình trình duyệt trở nên nhỏ hơn giá trị này, menu sẽ điều chỉnh. Bạn có thể thay đổi điểm truy vấn phương tiện trong tệp kiểu.

      Và bây giờ, như một ví dụ rõ ràng về cách hoạt động của menu phản hồi và cách cài đặt nó trên trang web, tôi khuyên bạn nên xem video hướng dẫn.

      Đó là tất cả đối với tôi hôm nay, chúc bạn thành công và hẹn gặp lại trong các bài viết và video hướng dẫn mới!

      Tôi đề xuất xem xét một kỹ thuật để tạo một menu thích ứng đơn giản, rất linh hoạt và cũng khá hiệu quả, sử dụng đánh dấu ngữ nghĩa thuần túy, để triển khai thiết kế thích ứng mà không cần kết nối javascript. Kết quả là, bằng cách sử dụng CSS, chúng ta sẽ có được một menu có thể được căn chỉnh sang trái, phải hoặc được đặt chính xác ở giữa, với các mục đang hoạt động/hiện tại được đánh dấu, một menu có thể nhanh chóng sắp xếp lại chính nó khi thay đổi kích thước cửa sổ trình duyệt vào thanh điều hướng dọc, thả xuống trông đẹp mắt trên màn hình của nhiều thiết bị người dùng di động khác nhau (máy tính bảng, điện thoại thông minh, máy tính xách tay và điện thoại di động).

      Chúng tôi đã xem ví dụ và đảm bảo rằng menu của chúng tôi hoạt động. Phương pháp này nhìn chung rất hữu ích khi một menu sử dụng nhiều liên kết. Bạn có thể dễ dàng nhóm tất cả các nút vào một bảng điều khiển hấp dẫn mở ra khi di chuột.


      Đánh dấu HTML

      Trước hết, chúng ta cần đánh dấu toàn bộ cấu trúc chính của menu. Chúng tôi đang tạo một phần tử điều hướng, có nghĩa là việc sử dụng phần tử HTML5, một thẻ có lớp cùng tên được gán cho nó là hợp lý và thậm chí thực tế, để định dạng các kiểu CSS tiếp theo, cũng như tạo và định vị tuyệt đối của một thanh điều hướng thả xuống. Lớp hiện tại trỏ đến liên kết menu hiện hoạt / hiện tại, giao diện của liên kết này sẽ được tạo bằng css.

      • trang chủ
      • Về chúng tôi
      • danh mục đầu tư
      • Dịch vụ của chúng tôi
      • Liên lạc

      Như bạn có thể thấy, menu là một danh sách đơn giản không có thứ tự với một số lượng liên kết nhất định. Số điểm có thể khác nhau nhưng vẫn không cần phải lăn tăn, mọi thứ đều trong giới hạn hợp lý.
      Hơn nữa, trước khi chúng ta đi quá xa, tôi muốn nhắc bạn và giải thích cho những người chưa biết rằng HTML5 và truy vấn phương tiện không được hỗ trợ bởi các phiên bản IE cũ hơn 9 (không có gì đáng ngạc nhiên). Để tránh đau đầu trong tương lai và làm mọi thứ đúng cách, có những tập lệnh đặc biệt và với sự trợ giúp của chúng, chúng ta có thể giải quyết vấn đề tương thích bằng cách kết nối chúng một cách thận trọng với tài liệu trong phần.

      Tất cả. Chúng tôi đã sắp xếp các đánh dấu cơ bản, các lớp đã được đăng ký và những chiếc nạng đã được thêm vào. Bây giờ, hãy chuyển sang xác định kiểu của các mục menu, định hình giao diện và làm cho menu của chúng ta thực sự thích ứng.

      Kiểu xác định CSS

      Tập hợp các kiểu menu CSS cho màn hình máy tính để bàn khá chuẩn; tôi không thấy có điểm nào cần đi sâu vào chi tiết. Tôi chỉ muốn bạn chú ý đến thực tế là tôi đã chỉ định phần tử display:inline-block thay vì phần tử float:left

    • trong vùng chứa điều hướng điều hướng. Điều này sẽ cho phép các mục menu được căn chỉnh sang trái, phải và căn giữa chính xác bằng cách chỉ định thuộc tính text-align cho mục danh sách
        .

        /* menu */ .nav ( lề : 20px 0 ; ) .nav ul ( lề : 0 ; phần đệm : 0 ; ) .nav li ( lề : 0 5px 10px 0 ; phần đệm : 0 ; kiểu danh sách : none ; display : khối nội tuyến ; * hiển thị : nội tuyến ; /* ie7 */ ) .nav a ( đệm : 3px 12px ; trang trí văn bản : không ; màu : #999 ; chiều cao dòng : 100% ; ) .nav a : di chuột ( màu : #000 ; ) .nav .current a ( nền : #999 ; màu : #fff ; bán kính đường viền : 3px ; )

        /* menu */ .nav ( lề: 20px 0; ) .nav ul ( lề: 0; đệm: 0; ) .nav li ( lề: 0 5px 10px 0; đệm: 0; kiểu danh sách: không; hiển thị: khối nội tuyến; *display:inline; /* ie7 */ ) .nav a ( đệm: 3px 12px; trang trí văn bản: none; màu: #999; chiều cao dòng: 100%; ) .nav a:hover ( màu : #000; ) .nav .current a ( nền: #999; màu: #fff; bán kính đường viền: 3px; )

        Các phần .nav a:hover và .nav .current a chịu trách nhiệm thay đổi màu sắc của các liên kết và nền của các mục menu hiện hoạt/hiện tại tương ứng. Tôi không cố tỏ ra quá thông minh trong ví dụ này, tôi làm mọi thứ theo tinh thần tối giản, khi bạn di chuột qua liên kết, màu sắc sẽ thay đổi, văn bản sẽ trở thành màu đen: #000; và đối với các mục đang hoạt động, tôi đã thêm nền: #999; , thay thế màu phông chữ bằng màu trắng: #fff; và bo tròn các cạnh một chút border-radius: 3px; tại nút kết quả. Bạn có thể tưởng tượng và thử nghiệm về vấn đề này tùy theo nội dung trái tim của bạn.

        Căn giữa và phải

        Như tôi đã đề cập ở trên, chúng ta có thể thay đổi cách căn chỉnh các mục điều hướng bằng thuộc tính text-align bằng cách thêm một vài dòng mã CSS:

        /* menu bên phải */ .nav .right ul ( text-align : right ; ) /* menu ở giữa */ .nav .center ul ( text-align : center ; )

        /* menu bên phải */ .nav.right ul ( text-align: right; ) /* menu ở giữa */ .nav.center ul ( text-align: center; )

        Điều chỉnh thực đơn

        Cuộc vui bắt đầu. Menu của chúng tôi ở giai đoạn này có định dạng cao su (chiều rộng được xác định bằng phần trăm) và chưa thích ứng chút nào. Bắt đầu thay đổi kích thước màn hình và bạn sẽ thấy menu được tích hợp thành một mớ nút lộn xộn.


        Chúng tôi sẽ khắc phục tình trạng này bằng cách sử dụng truy vấn phương tiện. Tại điểm ứng dụng truy vấn phương tiện ở 600px, tôi đặt vị trí tương đối thành vị trí: tương đối; cho phần tử điều hướng để sau này chúng ta có thể đặt danh sách menu

          trên cùng ở vị trí tuyệt đối vị trí: tuyệt đối; . Sử dụng thuộc tính display: none, chúng ta sẽ ẩn tất cả các mục menu li, chỉ để lại các liên kết hiện đang hoạt động với lớp hiện tại, gán cho chúng thuộc tính display: block
          Khi bạn di chuột qua thanh điều hướng được nhóm, tất cả các mục menu sẽ được hiển thị dưới dạng danh sách thả xuống; để làm được điều này, chúng tôi xác định một quy tắc.nav ul:hover li với mã>display: chức năng chặn. Đối với các mục đang hoạt động/hiện tại, chúng tôi thêm một biểu tượng để làm nổi bật chúng so với các mục còn lại.
          Nếu bạn cần di chuyển menu sang bên phải hoặc căn giữa nó, hãy sử dụng thuộc tính định vị bên trái và bên phải cho danh sách ul của menu của chúng tôi.

          @media screen và (max-width: 600px) (.nav (vị trí: tương đối; chiều cao tối thiểu: 40px;).nav ul (chiều rộng: 180px; đệm: 5px 0; vị trí: tuyệt đối; trên cùng: 0; trái: 0 ; đường viền : rắn 1px #aaa ; nền : #FAFAFA url (hình ảnh/icon-menu.png ) không lặp lại 10px 11px ; bán kính đường viền : 5px ; .nav li ( hiển thị : không có ; /* ẩn tất cả
        • điểm */ lề : 0 ; ) .nav .current ( display : block ; /* chỉ hiển thị hiện đang hoạt động
        • items */ ) .nav a ( display : block ; phần đệm : 5px 5px 5px 32px ; căn chỉnh văn bản : left ; ) .nav .current a ( nền : none ; color : #666 ; ) /* khi di chuột qua các mục menu * / .nav ul: di chuột ( hình nền : không có ; ) .nav ul: di chuột li ( hiển thị : khối ; lề : 0 0 5px ; ) .nav ul : di chuột hiện tại ( nền : url ( hình ảnh/icon-check. png ) không lặp lại 10px 7px ; ) /* menu phản hồi ở bên phải */ .nav .right ul ( left : auto ; right : 0 ; ) /* menu đáp ứng ở giữa */ .nav .center ul ( left : 50% ; ) lề trái : -90px ;
          		•

          @media screen và (max-width: 600px) ( .nav ( vị trí: tương đối; chiều cao tối thiểu: 40px; ) .nav ul ( chiều rộng: 180px; đệm: 5px 0; vị trí: tuyệt đối; trên cùng: 0; trái: 0 ; đường viền: rắn 1px #aaa; nền: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px; bán kính đường viền: 5px; bóng hộp: 0 1px 2px rgba(0,0,0,. 3); ) .nav li ( hiển thị: không có; /* ẩn tất cả

        • điểm */ lề: 0; ) .nav .current ( display: block; /* chỉ hiển thị hiện đang hoạt động
        • items */ ) .nav a ( display: block; phần đệm: 5px 5px 5px 32px; text-align: left; ) .nav .current a ( nền: none; color: #666; ) /* khi di chuột qua các mục menu * / .nav ul:hover ( hình nền: none; ) .nav ul:hover li ( display: block; lề: 0 0 5px; ) .nav ul:hover .current ( nền: url(images/icon-check. png) không lặp lại 10px 7px; ) /* menu phản hồi ở bên phải */ .nav.right ul ( left: auto; right: 0; ) /* menu phản hồi ở giữa */ .nav.center ul ( left: 50%; lề trái: -90px; )

          Có lẽ đó là tất cả! Menu thích ứng 100% tuyệt vời của chúng tôi đã sẵn sàng, như bạn có thể thấy bằng cách xem lại ví dụ. Để nghiên cứu chi tiết hơn về tài liệu, bạn có thể tải xuống các nguồn và bình tĩnh, không cần phiền phức không cần thiết, đi sâu vào chủ đề.

          Bài học được biên soạn bằng tài liệu
          Dịch và chuyển thể miễn phí: Andrey /driver/

          Các đoạn mã phản hồi được cung cấp trong bài viết này lý tưởng cho mọi loại bố cục. Bạn sẽ tìm thấy trong danh sách này các menu dọc và ngang cho trang web, menu thả xuống và menu bên với nhiều hiệu ứng hoạt hình khác nhau. Thiết kế đáp ứng là một kỹ thuật xuất hiện hàng năm. Những đoạn mã này sẽ đóng vai trò là điểm khởi đầu cho các nhà thiết kế cho nhiều dự án web.

          Menu tối chỉ CSS của John Erbank

          Ngoài thiết kế, đoạn mã này còn xác định menu thả xuống đáp ứng. Thanh điều hướng trong cửa sổ tiêu chuẩn chiếm vị trí nằm ngang thông thường.

          Tại các điểm dừng nhỏ hơn, menu sẽ lấp đầy toàn bộ màn hình. Khi bạn di con trỏ qua các mục menu chính, các mục menu phụ có nền màu xám nhạt hơn sẽ được hiển thị. Giải pháp này lý tưởng cho những trang web không có quá nhiều liên kết đến các phần. Bằng cách này, chúng có thể được hiển thị trên trang dưới dạng một khối phần tử.

          Xem bản demo

          Danh mục đáp ứng đầy đủ của Celine

          Bố cục danh mục đầu tư đáp ứng đầy đủ này bao gồm một thanh điều hướng đơn giản nhưng hiệu quả. Khi cửa sổ xem bị giảm xuống một điểm kiểm soát nhất định, các mục menu phản hồi cho trang web sẽ bị ẩn, chỉ để lại nút chuyển đổi menu trên màn hình. Người dùng có thể nhấp vào nó để mở rộng hoặc ẩn menu mở rộng bên dưới tiêu đề.

          Xem bản demo

          Thanh điều hướng Bootstrap của Bobby

          Đoạn mã này chứa một số điểm dừng và được cài đặt trên Bootstrap.

          Ở kích thước khung nhìn lớn hơn, các liên kết điều hướng được đặt bên cạnh logo và tại các điểm dừng nhỏ hơn, chúng sẽ di chuyển xuống thanh riêng của chúng. Khi cửa sổ xem càng nhỏ hơn, các liên kết sẽ bị “ẩn” dưới nút chuyển menu. Đây là một phương pháp phổ biến hoạt động trong tất cả các trình duyệt.

          Xem bản demo

          Chuyển đổi thả xuống sạch của Boyd Massier

          Thanh điều hướng phản hồi phẳng với các menu thả xuống này được tạo bằng CSS thuần túy. Ở trạng thái phản hồi, thanh điều hướng sẽ chuyển thành một menu nổi trong đó các liên kết được hiển thị dưới dạng khối. Mỗi menu thả xuống nội bộ cũng có thể được chuyển đổi để cung cấp quyền truy cập vào các mục menu con.

          Xem bản demo

          Thanh trượt hoạt hình của Antoine Vinial

          Menu thả xuống trang web này là một trong những ví dụ độc đáo nhất về điều hướng. Bạn thấy một tab màu xanh nhạt, khi nhấp vào sẽ mở rộng thanh điều hướng ở trên cùng với các liên kết menu. Mỗi liên kết có chiều rộng nổi và điều chỉnh theo mọi kích thước màn hình.

          Trên màn hình nhỏ hơn, hiệu ứng tương tự được sử dụng nhưng menu được hiển thị theo chiều dọc thay vì chiều ngang. Hãy chú ý đến hiệu ứng hoạt ảnh đẹp mắt được điều khiển bằng lớp CSS .active.

          Xem bản demo

          Menu đáp ứng cơ bản của Ash Nelson

          Thoạt nhìn, menu này có vẻ tiêu chuẩn: các liên kết truyền thống, chuyển đổi menu hamburger và bảng màu phẳng. Mặc dù thiếu vẻ hào nhoáng nhưng menu vẫn hoạt động và dễ sử dụng. Tất cả mã của nó được viết bằng Haml và SASS.

          Xem bản demo

          Ngăn kéo trượt Hamburger Nav của Hanlin Chong

          Sự xuất hiện của menu trượt cho website đã làm nảy sinh nhiều tranh chấp giữa nhà thiết kế và nhà phát triển. Một số người tin rằng việc triển khai này cho phép bạn đưa nhiều nội dung vào menu mà không chiếm không gian hữu ích. Những người khác chỉ trích loại menu này vì các liên kết bị ẩn khỏi tầm nhìn của người dùng.

          Vì lý do này, nên sử dụng menu trượt một cách thận trọng. Trước hết, khi trang web có số lượng lớn các yếu tố điều hướng. Và nếu bạn đang tìm kiếm mẫu của loại menu này, tôi khuyên bạn nên chú ý đến đoạn mã này. Nó thực hiện một cấu trúc mà nhiều người dùng quen thuộc.

          Xem bản demo

          Điều hướng Mic một trang của Travis

          Trong menu này, các liên kết chiếm phần lớn màn hình và các mẫu nền tạo ra hiệu ứng ma trận. Điều này không hoàn toàn thực tế đối với các trang web thông thường nhưng hiệu ứng này có thể được sử dụng cho các dự án sáng tạo hoặc danh mục đầu tư trên web.

          Xem bản demo

          Menu biến hình tròn của Sergio

          Hãy thử nghiệm một chút với ví dụ về menu trang web này. Nhìn vào có thể bạn sẽ nghĩ đây là một menu trượt thông thường. Nhưng sau khi nhấn vào biểu tượng, bạn sẽ thấy hiệu ứng hiển thị menu động độc đáo.

          Giải pháp này khó có thể được ứng dụng rộng rãi trong lĩnh vực thương mại. Tuy nhiên, đây vẫn là một ví dụ tuyệt vời về phạm vi sáng tạo rộng lớn mà thiết kế đáp ứng mang lại.

          Xem bản demo

          Điều hướng CSS Flexbox thuần túy của Joe Watkins

          Flexbox CSS3 là thuật ngữ được các nhà phát triển sử dụng để chỉ mô hình bố cục CSS3 linh hoạt. Chúng tôi đã xuất bản và tôi khuyên bạn nên đọc.

          Menu này được xây dựng trên Flexbox, trong đó các liên kết được phân bố đều trong bảng điều khiển, bất kể kích thước màn hình. Tất cả mã được viết bằng HTML và CSS thuần túy, hỗ trợ các menu thả xuống cho trang web được triển khai.

          Xem bản demo

          Chuyển đổi hoạt hình của Joe Baggaley

          Nếu bạn yêu thích hiệu ứng hoạt hình thì bạn có thể sử dụng giải pháp này. Theo mặc định, các liên kết được căn chỉnh cạnh nhau và các menu con thả xuống được hỗ trợ.

          Sau khi thu nhỏ khung nhìn, thanh điều hướng sẽ biến mất dưới liên kết chuyển đổi. Menu được chuyển đổi thành một khối lớn, sau đó được hiển thị trên màn hình bằng hình ảnh động.

          Xem bản demo

          Menu điều hướng linh hoạt của gantit

          Cách tiếp cận thực tế nhất là sử dụng nhiều điểm kiểm soát trong một thiết kế đáp ứng. Đó là lý do tại sao tôi thích hệ thống định vị này. Nó cho thấy một thanh điều hướng ngang tiêu chuẩn có thể trải qua nhiều giai đoạn khác nhau như thế nào. Đoạn mã này mang lại sự linh hoạt trong việc tùy chỉnh và có thể phù hợp hoàn toàn với bất kỳ trang web nào.

          Xem bản demo

          Tab CSS thuần túy của Martin Gaidichar

          Tab được coi là giải pháp điều hướng có thể chấp nhận được, cho phép di chuyển giữa các trang và nội dung bên trong. Khi khung nhìn bị thu nhỏ, chúng hoạt động giống như một khối điều hướng thông thường với các hiệu ứng hoạt hình. Phong cách thiết kế có thể dễ dàng mở rộng để phù hợp với sở thích của bạn.

          Xem bản demo

          Breadcrumbs CSS thuần túy của Oliver Noblitch

          Breadcrumbs không được các nhà thiết kế và phát triển ưa chuộng lắm nhưng chúng có thể được sử dụng cho các giao diện điều hướng. Những đường dẫn này được triển khai mà không có hiệu ứng hoạt hình nhưng được viết bằng CSS thuần túy.

          Xem bản demo

          Batman Nav của Mighty Shaban

          Trong menu trang web đáp ứng này, các liên kết được đặt thành bố cục có thể cuộn một trang cho phép bạn điều hướng giữa các phần. Khi thay đổi kích thước khung nhìn, menu ngang được chuyển thành khối dọc, ẩn phía sau biểu tượng.

          Hệ thống menu được bố trí đẹp mắt. Nó có thể hữu ích khi phát triển bất kỳ bố cục một trang nào.

          Xem bản demo

          Thả xuống đa cấp của Stephanie Water

          Thiết kế điều hướng đa cấp đòi hỏi phải lập kế hoạch cẩn thận. Đoạn mã này không chỉ có chức năng mà còn hỗ trợ các hiệu ứng phản hồi thông qua CSS. Khi thu nhỏ thanh điều hướng, người dùng có thể nhấp vào biểu tượng nằm bên cạnh một mục menu cụ thể và hiển thị menu con ẩn. Kỹ thuật này cho phép bạn giữ cho mã của mình có thể quản lý được.

          Xem bản demo

          Ứng dụng web sách điện tử CSS thuần túy của Andy Fitzsimon

          Giao diện menu được thiết kế mô phỏng giải pháp iOS tiêu chuẩn, với các thanh điều hướng ở đầu và cuối màn hình. Đoạn mã này đã sử dụng CSS flexbox, trong đó các liên kết menu đa cấp và các thành phần trang của trang web sẽ thay đổi kích thước theo tỷ lệ để phù hợp với kích thước của cửa sổ trình duyệt.

          Xem bản demo

          Điều hướng có chiều rộng bằng nhau của Dorian Kovran

          Giao diện này chứa các khối liên kết thanh điều hướng có chiều rộng bằng nhau. Mỗi liên kết chiếm cùng một tỷ lệ phần trăm của màn hình theo chiều ngang cho đến khi đạt đến một điểm tham chiếu nhỏ nhất định. Sau đó, thanh menu sẽ bị ẩn dưới biểu tượng chuyển đổi. Mã nhỏ gọn, đẹp và đầy đủ chức năng.

          Xem bản demo

          Hộp điều hướng đa cấp cách điệu của Andrew DeBrew

          Trong đoạn mã này, hiệu ứng tương tự được tái tạo khi kết hợp với chức năng thích ứng. Menu này linh hoạt một cách đáng ngạc nhiên và khá độc đáo so với các ví dụ khác về giải pháp đáp ứng.

          Hôm nay chúng ta sẽ nói về cách tạo một menu phản hồi chỉ bằng CSS3. Tại sao phải thích ứng? Đối với tôi, có vẻ như điều này rất quan trọng và nên trở thành tiêu chuẩn, bởi vì ngày nay có rất nhiều người truy cập Internet thông qua thiết bị di động (iPad, iPhone...). Những người dùng này cần có khả năng điều hướng trang web của bạn một cách dễ dàng. Để giải quyết vấn đề này, bạn có thể sử dụng jQuery hoặc JavaScript, nhưng hôm nay chúng ta sẽ xem xét một thứ khác.

          Về cơ bản, chúng ta sẽ có một menu thả xuống thông thường dựa trên danh sách UL > LI. Nếu chúng ta làm cho màn hình nhỏ hơn thì tất cả các menu con sẽ có sẵn bằng cách nhấp vào. Hãy xem chúng ta sẽ nhận được gì:

          Bước 1. HTML

          Đây là mã html của ví dụ demo của chúng tôi:

          chỉ mục.html

          Menu đáp ứng | Hướng dẫn viết kịch bản

          Ở đây tôi muốn lưu ý một điểm - meta với thuộc tính name=’viewpoint’. Thẻ này cần thiết để chia tỷ lệ chính xác nội dung trang trên màn hình của bạn, có thể là màn hình máy tính hoặc điện thoại di động. Phần còn lại của mã không khó hiểu. Danh sách đa cấp UL > LI.

          Bước 2: CSS

          Vì vậy, phong cách. Trước hết, đối với chính trang đó:

          css/main.css

          * ( lề: 0; phần đệm: 0; ) html ( màu nền: #fff; chiều cao: 100%; ) phần thân ( màu: #333333; phông chữ: 0,75em/1,5em Arial, sans-serif; ) .container ( lề trái: tự động; lề phải: tự động; lề trên: 30px;

          Bây giờ hãy viết kiểu cho các thành phần menu trên cùng:

          /* kiểu phổ biến và cấp cao nhất */ #nav span ( display: none; ) #nav, #nav ul ( list-style: none external none; lề: 0; đệm: 0; ) #nav ( màu nền: # F5F5F5; viền-dưới: 5px liền mạch #333333; lề trái: 1%; chiều rộng tương đối: 98%; bóng hộp: 1px 5px rgba(0, 0, 0,2); : đỉnh tuyệt đối: 96% ; ) #nav > li ( border-bottom: 5px trong suốt; float: left; lề-bottom: -5px; text-align: left; -moz-transition: tất cả 300ms dễ dàng ra vào 0s; -ms-transition: tất cả 0s dễ dàng vào ra 300ms; -o-transition: tất cả 300ms dễ dàng vào ra; -webkit-transition: tất cả 300ms dễ dàng ra vào; : khối; trang trí văn bản: không có; -moz-transition: màu 450ms dễ dàng ra vào 0s, màu nền 450ms dễ dàng ra vào 0s; màu 450ms dễ dàng ra vào 0s; -o-transition: 0s dễ dàng ra vào màu 450ms, 0s dễ dàng ra vào màu nền 450ms; -webkit-transition: màu 450ms dễ dàng ra vào 0s, màu nền 450ms dễ dàng ra vào 0s; quá trình chuyển đổi: màu 450ms dễ dàng ra vào 0s, màu nền 450ms dễ dàng ra vào 0s; khoảng trắng: bình thường; ) #nav > li > a ( color: #333333; display: block; font-size: 1.3em; line-height: 49px; đệm: 0 15px; chuyển đổi văn bản: chữ hoa; ) #nav > li:hover > a , #nav > a:hover ( màu nền: #F55856; màu: #FFFFFF; ) #nav li.active > a ( màu nền: #333333; màu: #FFFFFF; )

          Hãy triển khai các kiểu cho menu con (danh sách thả xuống):

          /* menu con */ #nav li:hover ul.subs ( display: block; ) #nav ul.subs > li ( display: inline-block; float: none; đệm: 10px 1%; căn chỉnh dọc: top; chiều rộng : 33%; ) #nav ul.subs > li a ( color: #777777; line-height: 20px; ) #nav ul li a:hover ( color: #F55856; ) #nav ul.subs > li > a ( cỡ chữ: 1.3em; lề dưới: 10px; chuyển đổi văn bản: chữ hoa; ) #nav ul.subs > li li ( float: none; đệm-trái: 8px; -moz-transition: đệm 150ms dễ dàng ; -ms-transition: đệm 150ms dễ dàng 0s; -o-transition: đệm 150ms dễ dàng 0s; -webkit-transition: đệm 150ms dễ dàng 0s; ; )

          Tuyệt vời. Bây giờ điều quan trọng nhất là menu sẽ thích ứng như thế nào? Trên thực tế, mọi thứ đều rất đơn giản! Chúng tôi sẽ sử dụng truy vấn phương tiện CSS3 để xác định kiểu nào sẽ hiển thị dựa trên kích thước màn hình của người dùng. Chúng tôi cũng sẽ chuyển đổi menu bằng thủ thuật sau. Trong mã HTML của chúng tôi, ngay sau các cấp menu phía trên, tôi đã đặt các SPAN đặc biệt. Chúng tôi sẽ sử dụng chúng, chỉ định trạng thái hoạt động (lớp giả: mục tiêu) khi nhấp vào các thành phần menu trên cùng. Thao tác này sẽ mở một menu con. Hãy nhìn vào mã:

          /* quy tắc đáp ứng */ @media all và (max-width: 980px) ( #nav > li ( float: none; border-bottom: 0; Margin-bottom: 0; ) #nav ul.subs ( location:relative; top: 0; ) #nav li:hover ul.subs ( display: none; ) #nav li #s1:target + ul.subs, #nav li #s2:target + ul.subs ( display: block; ) #nav ul.subs > li ( display: block; width: auto; ) )

          Điểm mấu chốt

          Vì vậy, chúng tôi vừa tạo ra một menu đáp ứng thú vị ngay từ đầu. Tôi hy vọng bạn thấy nó hữu dụng. Chúc may mắn! Hẹn gặp lại!