50+ Tập lệnh điều hướng dựa trên thẻ CSS sạch đẹp
Một trong những nhiệm vụ quan trọng nhất của người thiết kế trải nghiệm người dùng là đảm bảo rằng điều hướng của trang web là đơn giản và thân thiện với người dùng. Và còn cách nào khác để thực hiện điều này hơn là thông qua các tab điều hướng.
Các tab điều hướng được thiết kế tốt không chỉ giúp người dùng biết nơi cần đến, chúng còn quan trọng để hướng lưu lượng truy cập đến các trang nội bộ của trang web hoặc blog của bạn.
Vì vậy, đối với bạn bè thiết kế web của tôi, đây là một danh sách dài các tập lệnh điều hướng dựa trên tab CSS đẹp và sạch. Mỗi tùy chọn có một bản demo trực tiếp cùng với nguồn tải xuống của nó. Vì vậy, hãy tiếp tục và xem cho chính mình.
bootstrap-tab-x - Một plugin tab mở rộng được xây dựng trên đầu Tabststrap. Nó có thể căn chỉnh các tab, xoay tiêu đề, tải nội dung qua AJAX, và nhiều tính năng khác. [Bản giới thiệu]
Tab CSS thuần với chỉ báo - Một thư viện tab hiện đại nhưng đơn giản được xây dựng mà không cần JavaScript. Điều đó có nghĩa là, nó là nhanh và đẹp cũng như - đẹp như bạn thấy trên hầu hết các trang web phổ biến. [Bản giới thiệu]
Tabby - Tabby cho phép bạn tạo các tab chuyển đổi đơn giản, có thể hiển thị bất kỳ nội dung nào bao gồm cả video. Nó cung cấp nhiều tùy chọn nâng cao và hỗ trợ NPM và Bower quá. [Bản giới thiệu]
Điều hướng theo thẻ - Một điều hướng theo thẻ hiện đại, tiện dụng được hỗ trợ bởi JS và CSS, được xây dựng với ý tưởng đầu tiên trên thiết bị di động và hỗ trợ các kiểu định vị ngang cũng như dọc. [Bản giới thiệu]
Toggler - Toggler là một plugin JavaScript thuần túy để tạo các yếu tố có khả năng chuyển đổi bao gồm accordion và tab. Ngoài ra, bạn có thể hiển thị / ẩn bất kỳ mục nào trên trang. [Bản giới thiệu]
Tab CSS thuần - Một đoạn mã đơn giản được tạo bằng CSS và JS. Mặc dù mã ví dụ hiển thị các tab đơn giản nhưng bạn có thể làm đẹp các tab bằng cách thay đổi kiểu dáng của chúng bằng CSS. [Bản giới thiệu]
CSS Tabsy - Thư viện chỉ dành cho CSS để tạo các thành phần chuyển đổi đơn giản như các tab. Thư viện này, không giống như một vài trong số các thư viện trên, không cần phụ thuộc - thậm chí không có bất kỳ mã JS nào. [Bản giới thiệu]
Tabbis.js - Tabbis là một plugin đơn giản nhưng nâng cao. Sử dụng các tùy chọn cấu hình nâng cao của nó, bạn có thể tạo các tab lồng nhau và xác định các cuộc gọi lại quá. [Bản giới thiệu]
Các thẻ CSS thuần đáp ứng [Bản giới thiệu]
CSS Tab [Bản giới thiệu]
Tab sử dụng Pitaya - Các tab sử dụng Pitaya giúp bạn tạo tab chuyển đổi hoạt hình dễ dàng. Tuy nhiên, bạn phải bao gồm Pitaya, bản thân nó là một thư viện và tăng thời gian tải. [Bản giới thiệu]
jTabs - jTabs là một thư viện tab được xây dựng bằng JavaScript thuần. Điều đó có nghĩa là nó được xây dựng với không phụ thuộc bên ngoài như jQuery và hỗ trợ một vài tùy chọn cấu hình. [Bản giới thiệu]
Responsive Flexbox Tab [Bản giới thiệu]
Tab Accordion [Bản giới thiệu]
tab.js - tab.js là một thư viện tab JavaScript thuần được lấy cảm hứng từ Accordion / Tab của Bourbon Refills. Nó là đáp ứng như vậy đó các tab thay đổi thành accordion trên màn hình nhỏ. [Bản giới thiệu]
WellTabber - WellTabber là một plugin JavaScript đơn giản khác như Tabby. Giống như cái sau, nó hỗ trợ các tùy chọn khác nhau để định cấu hình các tab. Ngoài ra, bạn có thể hiển thị mũi tên điều hướng. [Bản giới thiệu]
Giao diện theo thẻ 3D Cube [Bản giới thiệu]
Mô-đun Tab cho ES6 [Bản giới thiệu]
Biến cao với các tab CSS [Bản giới thiệu]
Vật liệu thiết kế Tab - Một đoạn trích lấy cảm hứng thiết kế vật liệu được xây dựng bằng Vanilla JavaScript. Nó là đơn giản để sử dụng và tùy biến là tốt. Tuy nhiên, nó không có tính năng tùy chọn nâng cao. [Bản giới thiệu]
Các thẻ CSS hoạt hình - Tab hoạt hình CSS là một hệ thống tab chỉ CSS cho phép bạn tạo các tab đơn giản, nhẹ nhàng. Không giống như Tabby hay WellTabber, nó không cung cấp bất kỳ cấu hình nâng cao. [Bản giới thiệu]
tinh khiết [Bản giới thiệu]
Các tab có thể truy cập JavaScript của Vanilla [Bản giới thiệu]
Tab hoạt hình theo phong cách Scifi [Bản giới thiệu]
Các thẻ thích ứng Bootstrap CSS thuần túy - Một hệ thống tab lấy cảm hứng từ Bootstrap được xây dựng chỉ bằng CSS và không có JavaScript. Tính năng độc đáo mà nó mang lại là các tab quá mức trong màn hình được chuyển sang danh sách thả xuống. [Bản giới thiệu]
Thanh Tab có thể gập lại - Một tiện ích tab dựa trên CSS3 thuần túy và không có JavaScript, như các plugin khác nhau trong danh sách này. Điều làm cho nó thú vị là các tab của nó có một chuyển tiếp đẹp mắt có thể gập lại. [Bản giới thiệu]
Các thẻ hoạt hình CSS tuyệt vời [Bản giới thiệu]
Trình sắp xếp JavaScript - Một plugin tab nâng cao được xây dựng chỉ với JavaScript. Nó cho phép bạn đặt một tab mặc định, thay đổi tab động và thêm chức năng gọi lại sự kiện onLoad và onClick. [Bản giới thiệu]
Bộ xương [Bản giới thiệu]
Tabtastic - Tabtastic là một plugin dễ dàng để thực hiện các tab bằng CSS và JS. Nó sử dụng đánh dấu ngữ nghĩa, có thể truy cập cho trình đọc màn hình, và hỗ trợ các tab lồng nhau trên một trang. [Bản giới thiệu]
Các thẻ thư mục CSS3 & jQuery - Hướng dẫn dễ dàng này (với mã có thể tải xuống) chia sẻ về tạo các tab thư mục bằng CSS3 và jQuery. Nó nhắc tôi về các tab được hiển thị trong các trình duyệt như Google Chrome. [Bản giới thiệu]
Nội dung theo thẻ [Bản giới thiệu]
Các tab điều hướng có chiều rộng bằng nhau - Một đoạn mã, hiển thị việc sử dụng CSS đơn giản để xây dựng các tab điều hướng có chiều rộng bằng nhau. Bạn có thể tùy chỉnh giao diện, nhưng nó không cung cấp tùy chọn nâng cao ngoài hộp. [Bản giới thiệu]
Nội dung được gắn thẻ với jQuery & CSS [Bản giới thiệu]
Thuật sĩ khởi động Twitter - Twitter Bootstrap Wizard là một plugin để xây dựng trình hướng dẫn cấu trúc có thể lập bảng. Tôi nhận thấy bạn có thể tạo chỉ các tab bằng cách ẩn hoặc xóa các nút tiếp theo và trước đó. [Bản giới thiệu]
Tab CSS thuần [Bản giới thiệu]
Các thẻ CSS đáp ứng [Bản giới thiệu]
Chỉ cần một thẻ CSS khác - Một cấu trúc tab được tạo thủ công đẹp mắt được xây dựng chỉ bằng CSS, mà hoạt động trên các trình duyệt hiện đại. Tuy nhiên, không giống như một số plugin mạnh mẽ được đưa ra ở trên, nó không có tùy chọn nâng cao. [Bản giới thiệu]
Đáp ứng phù hợp với Tab - Responsive Accordion to Tab, như tên cho thấy, hoạt động như accordion hoặc các tab dựa trên chiều rộng màn hình. Nó hiển thị các tab nếu accordion khác nếu kích thước nhỏ. [Bản giới thiệu]
CardTabs - CardTabs là một plugin tab siêu nhẹ dựa trên jQuery, đi kèm với nhiều chủ đề. Bạn cũng có thể tạo chủ đề mới và thiết lập tab hoạt động một cách linh hoạt. [Bản giới thiệu]
Thẻ Tab [Bản giới thiệu]
Tab tối thiểu và gợi cảm - Một đoạn mã đẹp, mới đó là có sẵn trong hai bảng màu - sáng và tối. Nó được xây dựng bằng jQuery, vì vậy nó không nhẹ như một số plugin khác được liệt kê ở trên. [Bản giới thiệu]
Tiện ích theo thẻ [Bản giới thiệu]
Tab thích ứng - Thích ứng Tab là một đoạn mã đơn giản, đẹp. Ngoài thiết kế hiện đại, nó không có nhiều tính năng như thế có sẵn trong một vài plugin nâng cao được đưa ra ở trên. [Bản giới thiệu]
Tab kiểu cây [Bản giới thiệu]
Tabious.js [Bản giới thiệu]
Các tab jQuery - jQuery Tab là một plugin đơn giản để tạo các tab. Như tên gọi của nó, nó là được xây dựng bằng jQuery, không giống như một số plugin được liệt kê ở trên được xây dựng bằng CSS hoặc JavaScript thuần. [Bản giới thiệu]
jQuery rTabs [Bản giới thiệu]
Ghi chú của biên tập viên: Bài đăng này ban đầu được xuất bản vào tháng 6 năm 2008 và được cập nhật vào tháng 4 năm 2018 trên cơ sở nội dung mới.
