Tạo Menu điều hướng đáp ứng thông minh hơn với Plugin jQuery này
Mỗi trang web hiện đại cần một bố trí đáp ứng và một điều hướng có thể sử dụng. Đó là sự cống hiến.
Nhưng, thực đơn hamburger chỉ có thể đi rất xa và họ thay đổi hoàn toàn khả năng sử dụng cho các kích cỡ màn hình khác nhau. Cách tốt hơn để xử lý việc này là dần dần ẩn liên kết với một plugin như Được rồi.
Plugin jQuery miễn phí này thêm một tính năng menu rất đơn giản đến bất kỳ trang nào và nóẩn thấp các mục điều hướng, dựa trên các khung nhìn khác nhau Bằng cách này, người dùng điện thoại thông minh có menu hamburger đơn nhưng người dùng máy tính bảng cũng có thể thấy một vài liên kết.
Theo mặc định, nó dựa vào một thành phần và một danh sách dài không có thứ tự. Cho đến nay, tôi không nghĩ plugin này hỗ trợ thả xuống đa cấp nhưng nếu bạn biết một chút về jQuery, bạn có thể tự thêm nó.
OkayNav cực kỳ đơn giản và nó có nghĩa là cho các trang web đơn giản hơn chỉ có một số ít các liên kết điều hướng. Những liên kết này từ từ ẩn đằng sau một menu ngoài màn hình một khi họ đạt được một khung nhìn nhất định và nhiều liên kết tiếp tục ẩn trình duyệt càng nhỏ.
Bạn sẽ cần phải bọc danh sách không theo thứ tự của bạn trong một yếu tố điều hướng và cung cấp cho nó một ID cụ thể. Sau đó bạn có thể nhắm mục tiêu toàn bộ hải quân với okayNav () chức năng như thế này:
var navigation = $ ('# nav-main'). okayNav (); Lưu ý đây chỉ là thiết lập đơn giản nhất không có bất kỳ tính năng tùy chỉnh. Bạn có thể làm việc với hơn một chục tùy chọn tùy chỉnh được tích hợp vào thư viện này để kiểm soát kiểu biểu tượng, hoạt hình menu, hỗ trợ vuốt và chức năng gọi lại.
Và, bạn thậm chí có thể gọi menu để mở / đóng tùy ý bằng cách chuyển các giá trị cụ thể cho hàm. Đây là một ví dụ đơn giản để mở điều hướng:
navigation.okayNav ('openInvisibleNav'); Tất cả các mã này đều được ghi lại trong GitHub repo trong đó cũng bao gồm tải về tập lệnh. Nếu bạn thích tuyến đường CDN, bạn cũng có thể sử dụng Liên kết RawGit để thêm tập lệnh này trực tiếp từ GitHub.
Được rồi tuyệt vời cho các trang web nhỏ hơn được hưởng lợi từ các kỹ thuật điều hướng tiến bộ. Nhưng, nếu bạn vẫn không chắc chắn về cách thức hoạt động của nó, hãy xem bản demo này trên CodePen cho thấy plugin này có thể làm gì.
