50+ хороших чистых CSS навигационных скриптов на основе вкладок

Одна из самых важных задач дизайнера пользовательского опыта - убедиться, что навигация сайта проста и удобна для пользователя. И что еще можно сделать, кроме как с помощью вкладок навигации.

Хорошо продуманные навигационные вкладки не только помогают пользователям узнать, куда идти, они также важны для привлечения трафика на внутренние страницы вашего сайта или блога..

Итак, для моих друзей, веб-дизайнеров, вот длинный список хороших и чистых скриптов навигации на основе вкладок CSS. Каждый вариант имеет живое демо вместе с источником загрузки. Так что иди и посмотри на себя.

бутстраповская-вкладка-х - Плагин для расширенных вкладок, созданный поверх вкладок Bootstrap. Оно может выравнивать вкладки, вращать заголовки, загружать контент через AJAX, и множество других функций. [Демо]

Чистые CSS вкладки с индикатором - Современная, но простая библиотека вкладок, созданная без JavaScript. Это означает, что это быстро и красиво а также - так красиво, как вы видите на самых популярных сайтах. [Демо]

полосатый - Tabby позволяет создавать простые переключаемые вкладки, которые могут отображать любой контент, включая видео. Он предлагает различные расширенные возможности и поддержка NPM и Bower тоже. [Демо]

Адаптивная навигация с вкладками - Современная удобная навигация с вкладками на основе JS и CSS, созданная с учетом потребностей мобильных устройств и поддерживает горизонтальное и вертикальное позиционирование. [Демо]

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

Чистые CSS вкладки - простой фрагмент вкладки, созданный с использованием CSS и JS. Хотя в примере кода показаны простые вкладки, вы можете украсить вкладки, изменив их стиль с помощью CSS. [Демо]

Табси CSS - Библиотека только для CSS для создания простых компонентов переключения, таких как вкладки. Эта библиотека, в отличие от немногих из вышеперечисленных, не требует никаких зависимостей - даже никакого кода JS. [Демо]

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

Отзывчивые вкладки Pure CSS [Демо]

Вкладки CSS [Демо]

Вкладки с использованием питайи - Вкладки с помощью Pitaya поможет вам создать анимированные вкладки перехода легко. Однако вы должны включить Pitaya, которая сама по себе является библиотекой и увеличивает время загрузки. [Демо]

jTabs - jTabs - это библиотека вкладок, созданная с использованием чистого JavaScript. Это означает, что он построен с нет внешних зависимостей, таких как jQuery и поддерживает несколько вариантов конфигурации тоже. [Демо]

Отзывчивые вкладки Flexbox [Демо]

Вкладки Аккордеон [Демо]

tabs.js - tabs.js - это библиотека JavaScript-вкладок, созданная по мотивам Accordion / Tabs of Bourbon Refills. Это отзывчивый такой, что вкладки меняются на аккордеоны на маленьких экранах. [Демо]

WellTabber - WellTabber - еще один простой JavaScript-плагин, такой как Tabby. Как и последний, это поддерживает различные параметры для настройки вкладок. Также вы можете показывать навигационные стрелки. [Демо]

3D Cube Tabbed Interface [Демо]

Модуль вкладок для ES6 [Демо]

Переменная высота с вкладками CSS [Демо]

Вкладки дизайна материалов - Фрагмент вкладки с дизайном материала создан с использованием Vanilla JavaScript. это простой в использовании и настраиваемый. Тем не менее, он не имеет дополнительных параметров. [Демо]

Анимированные вкладки CSS - Анимированные вкладки CSS - это система вкладок, предназначенная только для CSS, которая позволяет создавать простые, легкие вкладки. В отличие от Табби или WellTabber, это не предлагает никаких расширенных настроек. [Демо]

pureTabs [Демо]

Ванильные JavaScript Доступные вкладки [Демо]

Анимированные вкладки в стиле Scifi [Демо]

Чистый CSS Bootstrap Адаптивные вкладки - Система вкладок в стиле Bootstrap, созданная с использованием только CSS и без JavaScript. Какая уникальная особенность это приносит вкладки на экране перемещаются в выпадающий список. [Демо]

Складная панель вкладок - Виджет вкладок, основанный на чистом CSS3 и без JavaScript, как различные плагины в этом списке. Что делает его интересным, так это его вкладки красивый складной переход. [Демо]

Удивительные CSS анимированные вкладки [Демо]

JavaScript Tabifier - Расширенный плагин вкладок построен только с JavaScript. Позволяет установить вкладку по умолчанию, динамически изменить вкладку и добавить функции обратного вызова событий onLoad и onClick. [Демо]

Скелетные вкладки [Демо]

Tabtastic - Tabtastic - простой плагин для реализации вкладок с использованием CSS и JS. Это использует семантическую разметку, доступен для программ чтения с экрана, и поддерживает вложенные вкладки на странице. [Демо]

Вкладки папок CSS3 и jQuery - Это простое руководство (с загружаемым кодом) рассказывает о создание вкладок папок с использованием CSS3 и jQuery. Это напоминает мне вкладки, отображаемые в браузерах, таких как Google Chrome. [Демо]

Содержимое с вкладками [Демо]

Навигационные вкладки равной ширины - Фрагмент кода, демонстрирующий использование простого CSS для создания вкладок навигации одинаковой ширины. Вы можете настроить внешний вид, но он не предлагает расширенные возможности из коробки. [Демо]

Содержимое с вкладками с помощью jQuery & CSS [Демо]

Мастер начальной загрузки Twitter - Twitter Bootstrap Wizard - это плагин для создания мастеров со структурой с вкладками. Я заметил, что вы можете создавать только вкладки, скрывая или удаляя следующие и предыдущие кнопки. [Демо]

Чистые CSS вкладки [Демо]

Отзывчивые вкладки CSS [Демо]

Просто еще одна вкладка CSS - Красиво созданная структура вкладок, созданная только с помощью CSS, которая работает в современных браузерах. Однако, в отличие от нескольких приведенных выше мощных плагинов, он не имеет дополнительных параметров. [Демо]

Отзывчивый Аккордеон на Вкладки - Responsive Accordion to Tabs, как следует из названия, работает как аккордеон или вкладки в зависимости от ширины экрана. Это показывает вкладки, если это возможно, иначе аккордеон, если размер маленький. [Демо]

CardTabs - CardTabs является плагин для сверхлегких вкладок на основе jQuery, который поставляется с несколькими темами. Вы также можете создавать новые темы и динамически устанавливать активную вкладку. [Демо]

Aria Tabs [Демо]

Минимальные и сексуальные вкладки - Красивый, новый фрагмент вкладок, который доступен в двух цветовых решениях - светлый и темный. Он построен с использованием jQuery, поэтому он не такой легкий, как некоторые другие плагины, перечисленные выше. [Демо]

Виджет с вкладками [Демо]

Адаптивные вкладки - Adaptive Tabs - это простой, красивый фрагмент вкладок. Помимо современного дизайна, он не имеет больше функций, доступных в нескольких расширенных плагинах, указанных выше. [Демо]

Вкладка «Стиль дерева» [Демо]

Tabulous.js [Демо]

JQuery Tabs - jQuery Tabs - простой плагин для создания вкладок. Как следует из названия, это построена с использованием jQuery, в отличие от некоторых вышеперечисленных плагинов которые построены с чистым CSS или JavaScript. [Демо]

jQuery rTabs [Демо]

Примечание редактора: Этот пост был первоначально опубликован в июне 2008 года и был обновлен в апреле 2018 года на основе нового контента.