Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
 Những Thư Viện Tạo Navigation Miễn Phí

Những Thư Viện Tạo Navigation Miễn Phí


Ngày 16 Tháng 6 Năm 2020

Mình sẽ giới thiệu đến bạn một số thư viện cũng như một số plugin xây dựng navigation phổ biến trong năm 2020. Bây giờ hãy cùng mình đi vào tìm hiểu nhé.

Web Navigation Là Gì?

Navigation (Điều hướng trang web) là một phần không thể thiếu trong trang web với tính năng chính là giúp người dùng dễ dàng điều hướng đến các mục chính ở trên trang web. Khi chúng ta thiết kế một navigation thì điều kiện đầu tiên là làm sao người dùng có thể dễ tiếp cận và sử dụng. Sau đó là kết hợp thêm nhiều tính năng hữu ích với thiết kế có tính thẩm mỹ cao.

Vertical Fixed Navigation giúp bạn xây dựng navigation điều hướng dọc một cách nhanh chóng và dễ dàng. Nó giúp người dùng có cái nhìn tổng quát hơn về nội dung của trang và đi đến những thanh phần trong trang web một cách nhanh chóng. Khi bạn hover lên từng nút nằm bên tay phải thì các thông tin chính sẽ được tự động hiện ra. Điểm mình cảm thấy thích ở nó là có trang hướng dẫn chi tiết cách chỉnh sửa nội dung hay thiết lập style cho từng thành phần của navigation.

Thư Viện Vertical Fixed Navigation

Pushbar.js là một thư viện được viết bằng Javascript giúp bạn tạo các navigation nằm ở mọi ví trí như bên trái, bên phải, ở trên và ở dưới trong trang web. Cách thiết lập cũng rất đơn giản, bạn có thể dùng CDN, tải về để sử dụng hay cài đặc thông qua npm. Sau đó dùng lệnh new Pushbar() với các thuộc tính đi kèm để khởi tạo Pushbar cho trang web của mình. Ngoài ra bạn cũng có thể tham khảo thêm ở phần ví dụ được viết sẵn để áp dụng vào trang web được dễ dàng hơn.

Thư Viện Pushbar.js

MenuSpy là một thư viện Javascript giúp bạn thiết lập các thành phần con navigation sẽ được active dựa trên vị trí của người dùng trong trang web. Chức năng chính của thư viện này là giúp khách hàng biết được mình đang ở nội dung nào và dễ dàng chuyển sang các nội dung khác trong trang web. Ngoài ra bạn cũng có thể thiết lập các thuộc tính khác cho nó như là activeClass, hashTimeout, callback...

Thư Viện MenuSpy

SIDR là một thư viện Jquery giúp bạn tạo các sidebar một cách dễ dàng và nhanh chóng với nhiều tính năng hữu ích như là hiển thị responsive trên nhiều thiết bị, xác định vị trí sidebar trong trang web, hiển thị nội dung thông qua AJAX... Với từng tính năng như vậy thì sẽ có ví dụ và đoạn mã tương ứng giúp bạn dễ hình dung hơn. Và nó cũng cung cấp hai theme trắng và đen giúp bạn có sự lựa chọn phù hợp hơn cho trang web của mình. Mình có lưu ý nhỏ là khi bạn tải về thì các file CSS và Javascript cần thiết đều nằm trong thư mục dist nhé.

Thư Viện SIDR

Drawer là một thư viện Jquery với sự kết hợp của iScroll và CSS giúp bạn có thể tạo nhiều loại navigation khác nhau cho trang web của mình như là navbar, sidebar, fixed navbar... và đối với từng loại thì chúng ta cũng có thể xác định vị trí của nó khi hiển thị trong trang web. Bạn có thể dễ dàng thiết lập trực tiếp trong trang HTML thông qua CDN hoặc tải về trên Github nhé. Nó có các phần hướng dẫn chi tiết cho từng bước từ thiết lập, sử dụng đến cách mở rộng thông qua xác định thuộc tính mà bạn có thể tham khảo thêm trong trang demo.

Thư Viện Drawer

Responsive navigation là một thư viện javascript với kích thước chỉ khoảng 1Kb(Sau khi nén) giúp bạn dễ dàng xây dựng navigation hiển thị reponsive trên nhiều màn hình thiết bị khác nhau. Với việc kết hợp CSS3 và không sử dụng các thư viện bổ sung giúp cho trang web đạt hiệu suất tốt hơn so với những thư viện xây dựng navigation khác. Ngoài ra nó cũng cho phép chúng ta chỉnh sửa các thuộc tính nhằm đáp ứng tốt hơn khi áp dụng cho từng loại trang web khác nhau.

Thư Viện Responsive navigation

Mega Dropdown giúp bạn xây dựng navigation với nhiều thành phần con được lồng ghép vào nhau được hiển thị một cách rõ ràng và dễ hiểu. Ví dụ khi trang web bạn bán nhiều loại sản phẩm và trong từng loại đó lại chia thành các mục nhỏ hơn thì Mega Dropdown sẽ giúp bạn giải quyết vấn đề nhanh chóng và dễ dàng. Ngoài ra chúng ta cũng có thể dễ dàng thiết lập style, chỉnh sửa thành phần trong navigation, xử lý sự kiện thông qua các đoạn mã được viết sẵn ở trong trang demo.

Thư Viện Mega Dropdown

PriorityNavigation.js là một thư viện xây dựng bằng Javascript giúp tự động hiển thị các thành phần trong navigation dựa vào độ lớn của trang web trong màn hình. Ví dụ bạn có 5 thành phần con trong navigation, khi màn hình thu nhỏ thì nó sẽ hiển thị 2 thành phần và các thành phần còn lại sẽ được chứa trong dropdown. Ngoài ra nó cũng có thuộc tính giúp bạn tinh chỉnh linh hoạt hơn khi sử dụng trong trang web. Và nó cũng có phiên bản dành cho VueJS nữa nhé.

Thư Viện PriorityNavigation.js

bigSlide.js là một thư viện xây dựng bằng Jquery giúp bạn dễ dàng xây dựng navigation theo kiểu slider với kích thước chỉ khoảng 1kb(sau khi nén). Bạn chỉ cần tải file js về là có thể sử dụng mà không cần thêm bất kỳ thư viện nào. Ngoài ra nó còn có các thuộc tính để giúp bạn tinh chỉnh linh hoạt trong việc sử dụng.

Thư Viện bigSlide.js

Responsive Retina-Ready Menu là một navigation được xây dựng sẵn và tự động thay đổi kích thước dựa vào độ lớn của màn hình. Và nó thiết kế với 3 màn hình chính là desktop, máy tính bảng và điện thoại di động. Nó cũng có bài viết miêu tả đầy đủ từng bước giúp chúng ta có thể dễ dàng hiểu được cách mà component được tạo thành. Cộng thêm việc thiết kế màu sắc hài hòa cũng như hiệu ứng hover thú vị thì mình tin đây là một lựa chọn navigation tốt cho trang web của bạn.

Thư Viện Responsive Retina-Ready Menu

Multi-level push menu là một thư viện Jquery giúp bạn dễ dàng xây dựng navigation với nhiều thành phần con lồng ghép vào nhau nhưng vẫn hiển thị một cách trực quan, rõ ràng và dễ hiểu. Nó thì chạy được hầu hết trên các trình duyệt phổ biến hiện nay và cung cấp nhiều loại navigation khác nhau giúp bạn có sự lựa chọn đa dạng hơn cho trang web của mình. Đối với các bước thiết lập hay tinh chỉnh thành phần navigation thì nó đều có ví dụ với đoạn mã tương úng cũng như trang demo cho từng ví dụ đó.

Thư Viện Multi-level push menu

Circular Navigation là một navigation được viết sẵn và bạn chỉ việc xem demo và tải về sử dụng. Nếu bạn muốn tìm hiểu rõ hơn cách nó được tạo nên thì có thể xem thêm phần miêu tả chi tiết từng bước ở bên dưới nhé. Đây là một navigation theo mình thấy là mang phong cách sáng tạo, hiện đại và một chút gì đó phá cách so với các navigation thông thường. Nó cũng giúp bạn giảm được diện tích khi đặt trên trang web thông qua phần ẩn hiện các thành phần trong navigation.

Circular Navigation

Một số nguồn và thư viện Navigation khác

Responsive Multi-Level Menu
3D Rotating Navigation
Google Nexus Website Menu

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thu viện cũng như plugin navigation hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!