Cách tạo điều hướng đáp ứng

Một trong những phần khó nhất đáp ứng trên một trang web là “Điều hướng”, phần này thực sự quan trọng đối với khả năng truy cập trang web, vì đây là một trong những cách khách truy cập nhảy qua các trang web.

Thực tế, có nhiều cách để tạo điều hướng trang web đáp ứng và thậm chí một số plugin jQuery có sẵn để làm điều đó trong một giây.

Tuy nhiên, thay vì áp dụng một giải pháp tức thì, trong bài đăng này, chúng tôi sẽ hướng dẫn bạn thực hiện Làm thế nào để xây dựng một điều hướng đơn giản từ mặt đất và sử dụng các truy vấn phương tiện CSS3 và một chút jQuery để hiển thị nó ở kích thước màn hình nhỏ như điện thoại thông minh đúng cách.

Vì vậy, hãy bắt đầu.

Bản giới thiệu
Tải xuống nguồn

HTML

Trước hết, hãy thêm chế độ xem meta bên trong cái đầu nhãn. Điều này chế độ xem meta cần có thẻ để trang của chúng tôi chia tỷ lệ chính xác trong bất kỳ kích thước màn hình nào, đặc biệt là trong chế độ xem trên thiết bị di động.

Sau đó thêm đoạn trích sau đây làm đánh dấu điều hướng bên trong thân hình nhãn.

   Nhà
 Làm thế nào để
 Biểu tượng
 Thiết kế
 web 2.0
 Công cụ
 
 Thực đơn

Như bạn có thể thấy ở trên, chúng tôi có sáu liên kết menu chính và thêm một liên kết nữa sau chúng. Liên kết thêm này sẽ được sử dụng để kéo điều hướng menu khi nó bị ẩn trong một màn hình nhỏ.

Đọc thêm: Đừng quên thẻ meta chế độ xem.

Kiểu dáng

Trong phần này, chúng tôi bắt đầu tạo kiểu điều hướng. Phong cách ở đây chỉ là trang trí, bạn có thể chọn bất kỳ màu nào bạn muốn. Nhưng trong trường hợp này, chúng tôi (cá nhân tôi) muốn thân hình để có một màu mềm mại và kem.

 cơ thể màu nền: # ece8e5;

Các hải quân thẻ xác định điều hướng sẽ có 100% chiều rộng đầy đủ của cửa sổ trình duyệt, trong khi ul nơi nó chứa các liên kết menu chính của chúng tôi sẽ có 600px cho chiều rộng.

 điều hướng chiều cao: 40px; chiều rộng: 100%; nền: # 455868; cỡ chữ: 11pt; họ phông chữ: 'PT Sans', Arial, sans-serif; font-weight: in đậm; vị trí: tương đối; viền dưới: 2px solid # 283744;  nav ul đệm: 0; lề: 0 tự động; chiều rộng: 600px; chiều cao: 40px;

Sau đó chúng ta sẽ phao menu liên kết ở bên trái, vì vậy chúng sẽ được hiển thị theo chiều ngang, nhưng việc nổi một phần tử cũng sẽ khiến cha mẹ của chúng sụp đổ.

 nav li hiển thị: nội tuyến; phao: trái;

Nếu bạn nhận thấy từ đánh dấu HTML ở trên, chúng tôi đã thêm xóa bên trong lớp học thuộc tính cho cả hải quân và ul để xóa mọi thứ xung quanh khi chúng ta thả nổi các phần tử bên trong nó bằng cách sử dụng hack Clearfix CSS này. Vì vậy, hãy thêm các quy tắc kiểu sau vào biểu định kiểu.

 .Clearfix: trước, .clearfix: after content: ""; hiển thị: bảng;  .clearfix: sau xóa: cả hai;  .clearfix * zoom: 1;

Vì chúng tôi có sáu liên kết menu và chúng tôi cũng đã chỉ định vùng chứa cho 600px, mỗi liên kết menu sẽ có 100px cho chiều rộng.

 điều hướng một màu: #fff; hiển thị: khối nội tuyến; chiều rộng: 100px; văn bản-align: trung tâm; trang trí văn bản: không có; chiều cao dòng: 40px; bóng văn bản: 1px 1px 0px # 283744;

Các liên kết menu sẽ được phân tách bằng 1px biên giới bên phải, ngoại trừ cái cuối cùng. Hãy nhớ bài đăng trước của chúng tôi về mô hình hộp, chiều rộng của menu sẽ được mở rộng cho 1px lam no 101px là bổ sung biên giới, vì vậy ở đây chúng tôi thay đổi kích thước hộp mô hình để hộp viền để giữ cho menu vẫn còn 100px.

 nav li a Border-right: 1px solid # 576979; kích thước hộp: hộp viền; -moz-box-sizing: hộp viền; -webkit-box-sizing: hộp viền;  nav li: con cuối cùng a Border-right: 0;

Tiếp theo, menu sẽ có màu sáng hơn khi ở trong :bay lượn hoặc là : hoạt động tiểu bang.

 điều hướng a: di chuột, điều hướng a: hoạt động màu nền: # 8c99a4;

Liên tục và cuối cùng, liên kết bổ sung sẽ bị ẩn (đối với màn hình máy tính để bàn).

 điều hướng # pull display: none;

Tại thời điểm này, chúng tôi chỉ tạo kiểu điều hướng và sẽ không có gì xảy ra khi chúng tôi thay đổi kích thước cửa sổ trình duyệt. Vì vậy, hãy nhảy sang bước tiếp theo.

Đọc thêm: Định cỡ hộp CSS3 (Hongkiat.com)

Truy vấn phương tiện truyền thông

Các truy vấn phương tiện CSS3 được sử dụng để xác định cách các kiểu sẽ thay đổi trong một số điểm dừng nhất định hoặc cụ thể là kích thước màn hình thiết bị.

Vì điều hướng của chúng tôi ban đầu là 600px fix-width, trước tiên chúng ta sẽ xác định kiểu khi nó được xem trong 600px hoặc kích thước màn hình thấp hơn, vì vậy thực tế nói, điều này là điểm dừng đầu tiên của chúng tôi.

Trong kích thước màn hình này, mỗi liên kết hai menu sẽ được hiển thị cạnh nhau, vì vậy ulchiều rộng ở đây sẽ là 100% của cửa sổ trình duyệt trong khi các liên kết menu sẽ có 50% cho chiều rộng.

 Màn hình @media và (max-width: 600px) nav height: auto;  điều hướng ul chiều rộng: 100%; hiển thị: khối; chiều cao: tự động;  nav li chiều rộng: 50%; phao: trái; vị trí: tương đối;  nav li a Border-bottom: 1px solid # 576979; viền phải: 1px solid # 576979;  điều hướng text-align: left; chiều rộng: 100%; văn bản thụt lề: 25px;

Sau đó, chúng tôi cũng xác định cách điều hướng được hiển thị khi màn hình nhỏ hơn 480px hoặc thấp hơn (vì vậy đây là điểm dừng thứ hai của chúng tôi).

Trong kích thước màn hình này, liên kết bổ sung mà chúng tôi đã thêm trước đó sẽ bắt đầu hiển thị và chúng tôi cũng cung cấp liên kết “Thực đơn” biểu tượng ở phía bên phải của nó bằng cách sử dụng :sau yếu tố giả, trong khi các liên kết menu chính sẽ bị ẩn để lưu nhiều không gian dọc hơn trên màn hình.

 @media chỉ màn hình và (max-width: 480px) nav Border-bottom: 0;  nav ul hiển thị: không có; chiều cao: tự động;  điều hướng # pull display: block; màu nền: # 283744; chiều rộng: 100%; vị trí: tương đối;  điều hướng # pull: after content: ""; nền: url ('nav-icon.png') không lặp lại; chiều rộng: 30px; chiều cao: 30px; hiển thị: khối nội tuyến; vị trí: tuyệt đối; phải: 15px; đầu trang: 10px;

Cuối cùng, khi màn hình nhỏ hơn 320px và hạ thấp menu sẽ được hiển thị theo chiều dọc từ trên xuống dưới.

 @media chỉ màn hình và (max-width: 320px) nav li display: block; phao: không có; chiều rộng: 100%;  nav li a Border-bottom: 1px solid # 576979;

Bây giờ, bạn có thể thử thay đổi kích thước cửa sổ trình duyệt. Bây giờ nó có thể điều chỉnh kích thước màn hình.

Đọc thêm: Truy vấn phương tiện cho các thiết bị tiêu chuẩn.

Hiển thị Menu

Tại thời điểm này, menu sẽ vẫn bị ẩn và sẽ chỉ hiển thị khi cần bằng cách nhấn hoặc nhấp vào “Thực đơn” liên kết và chúng ta có thể đạt được hiệu quả bằng cách sử dụng jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', function (e) e.preventDefault (); menu.slideToggle ();););

Tuy nhiên, khi bạn thay đổi kích thước cửa sổ trình duyệt ngay sau khi bạn vừa xem và ẩn menu trong một màn hình nhỏ, menu sẽ vẫn bị ẩn, vì không trưng bày kiểu được tạo bởi jQuery vẫn được đính kèm trong phần tử.

Vì vậy, chúng ta cần loại bỏ kiểu này khi thay đổi kích thước cửa sổ, như sau:

 $ (window) .resize (function () var w = $ (window). thong (); if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); );

Được rồi, đó là tất cả các mã chúng tôi cần, giờ đây chúng tôi có thể xem điều hướng từ các liên kết sau và chúng tôi khuyên bạn nên kiểm tra nó trong một công cụ kiểm tra thiết kế đáp ứng, chẳng hạn như Người phản hồi, để bạn có thể xem nó theo nhiều chiều rộng khác nhau.

Bản giới thiệu
Tải xuống nguồn

Tiền thưởng: Một cách khác

Như chúng tôi đã đề cập trước đó trong bài đăng này, có một số cách khác để thực hiện và sử dụng thư viện JavaScript có tên ChọnNav.js là một trong những cách dễ nhất. Đây là một JavaScript thuần không dựa vào thư viện bên thứ ba khác như jQuery.

Về cơ bản, nó sẽ nhân đôi menu danh sách của bạn và biến nó thành một menu sẽ sử dụng giao diện người dùng gốc từ chính thiết bị.

Vui lòng tham khảo tài liệu chính thức để thực hiện thêm.

Phần kết luận

Chúng tôi đã đi qua tất cả các cách để tạo điều hướng đáp ứng từ đầu. Cái này chúng tôi đã tạo ở đây chỉ là một trong những ví dụ, và như chúng tôi đã nêu trước đó trong bài đăng này và được trình bày ở trên, có nhiều giải pháp khác mà bạn có thể thực hiện. Vì vậy, bây giờ bạn quyết định chọn thực hành nào phù hợp nhất để phục vụ yêu cầu và cấu trúc điều hướng trang web của bạn.