50 скриптов навигационных вкладок с поддержкой CSS

2023-01-24 0 ∞

В статье приводится список скриптов навигации с помощью закладок. Каждый вариант имеет наглядный пример с доступным для загрузки исходным кодом.

bootstrap-tabs-x – расширенный плагин закладок, построенный на основе Bootstrap Tabs. Он позволяет выравнивать закладки, переворачивать заголовки, загружать контент через AJAX, а также включает в себя некоторые другие функции.

Демо

Pure CSS Tabs with Indicator – современная, но достаточно простая библиотека закладок, построенная без использования JavaScript. Это значит, что она быстрая и красивая.

Демо

Tabby – позволяет создавать простые закладки и выводить на них любой контент, включая видео. Данный скрипт предоставляет продвинутые настройки, поддерживает NPM и Bower.

Демо

Responsive Tabbed Navigation – современная удобная навигация, созданная с использованием JS и CSS, построенная с упором на мобильные устройства и поддерживающая горизонтальное и вертикальное расположение.

Демо

Toggler – плагин, написанный на чистом JavaScript, предназначен для создания элементов-переключателей, включая аккордеоны и закладки. Также он позволяет показывать/прятать любой элемент на странице.

Демо

Pure CSS Tabs – простой пример, созданный на основе CSS и JS. Несмотря на то, что он показывает «голые» закладки, вы сможете приукрасить их, изменив CSS стили.

Демо

Tabsy CSS – библиотека, написанная на CSS, предназначенная для создания простых элементов-переключателей, таких как закладки. Она не нуждается в дополнительных ресурсах и не требует использования JavaScript.

Демо

Tabbis.js – это простой, но продвинутый плагин. Используя его расширенные настройки, можно создавать вложенные закладки, а также определять функции обратного вызова.

Демо

Responsive Pure CSS Tabs

Демо

CSS Tabs

Демо

Tabs using Pitaya – скрипт позволяют с легкостью создавать анимированное переключение между закладками. Но нужно подключить Pitaya, которая является библиотекой и увеличивает время загрузки.

Демо

jTabs – библиотека закладок, написанная на чистом JavaScript. Это означает, что она построена без jQuery и поддерживает несколько опций настройки.

Демо

Адаптивные закладки на Flexbox

Демо

Закладки аккордеон

Демо

tabs.js – это библиотека, написанная на JavaScript. Она адаптивная, поэтому закладки меняются на аккордеон на маленьких экранах.

Демо

WellTabber – ещё один простой JavaScript-плагин, похожий на Tabby. Он поддерживает различные варианты настройки закладок. Также он позволяет показывать стрелки навигации.

Демо

3D Cube Tabbed Interface

Демо

Tabs Module for ES6

Демо

Variable Heights with CSS Tabs

Демо

Material Design Tabs – скрипт закладок, построенный с использованием Vanilla JavaScript. Он простой в использовании, но и не поддерживает расширенные опции.

Демо

Анимированные CSS-Закладки – позволяет создавать простые легковесные закладки. В отличие от Tabby или WellTabber, скрипт не предлагает расширенных настроек.

Демо

pureTabs

Демо

Vanilla JavaScript Accessible Tabs

Демо

Scifi-style Animated Tabs

Pure CSS Bootstrap Adaptive Tabs – система закладок построена исключительно с использованием CSS и без JavaScript. Уникальная функция, которую она предоставляет: закладки, не помещающиеся на экран, переносятся в выпадающий список.

Демо

Foldable Tab Bar – виджет закладок, написанный на чистом CSS3 (без использования JavaScript), как и другие плагины в этом списке. Его делают интересным закладки, имеющие красивый эффект сворачивания.

Демо

Awesome CSS Animated Tabs

Демо

JavaScript Tabifier – продвинутый плагин закладок на JavaScript. Он позволяет устанавливать закладку по умолчанию, изменять закладку динамически и добавлять функции обратного вызова в события onLoad и onClick.

Skeleton Tabs

Демо

Tabtastic – это простой плагин для создания закладок с помощью CSS и JS. Он использует семантическую разметку, доступен для программ чтения экрана и поддерживает вложенные закладки на странице.

CSS3 & jQuery Folder Tabs – это руководство с доступным для скачивания исходным кодом рассказывает о создании закладок папок с помощью CSS3 и jQuery. Оно напоминает мне о закладках в Google Chrome.

Демо

Tabbed Content

Equal-width Navigation Tabs – пример кода, демонстрирующий использование чистого CSS для создания закладок навигации одинаковой ширины. Вы можете настроить отображение, но не дополнительные настройки.

Демо

Tabbed Content with jQuery & CSS

Демо

Twitter Bootstrap Wizard – это плагин для создания установщика с закладками. Я заметил, что он позволяет создать только закладки, скрыв или удалив кнопки "Назад" и "Далее".

Pure CSS Tabs

Демо

Responsive CSS Tabs

Демо

Just Another CSS Tabs – прекрасно созданная структура закладок, построенная на чистом CSS, которая работает в современных браузерах. Но, в отличие от некоторых мощных плагинов, здесь нет расширенных настроек.

Демо

Responsive Accordion to Tabs – скрипт работает как аккордеон или как закладки в зависимости от ширины экрана. Он показывает закладки или аккордеон, если размер экрана слишком мал.

Демо

CardTabs – лёгкий плагин закладок, созданный на jQuery, который имеет несколько тем. Вы также можете создавать новые темы и устанавливать активную закладку динамически.

Демо

Aria Tabs

Демо

Minimal & Sexy Tabs – закладки, которые доступны в двух цветовых темах: светлой и тёмной. Скрипт построен на jQuery, поэтому не так легок, как некоторые упомянутые выше плагины.

Демо