50 + Nice Чистий CSS Tab-орієнтовані скрипти

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

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

Отже, для моїх друзів-веб-дизайнерів ось довгий список приємних і чистих сценаріїв навігації на основі вкладки CSS. Кожен варіант має a жити демо разом зі своїм джерелом завантаження. Отже, продовжуйте і подивіться на себе.

bootstrap-tabs-x - Плагін розширених вкладок, побудований на верхній частині вкладок Bootstrap. Це може вирівнюйте вкладки, повертайте заголовки, завантажуйте вміст через AJAX, та багато інших можливостей. [Демо]

Чисті вкладки CSS з індикатором - Сучасна бібліотека табуляторів, створена без JavaScript. Це означає, що це так швидко і красиво а також - красиві, як ви бачите на найпопулярніших веб-сайтах. [Демо]

Таббі - Tabby дозволяє створювати прості вкладки, які можуть відображати будь-який вміст, включаючи відео. Він пропонує різні розширені опції і підтримує NPM і Bower теж. [Демо]

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

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

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

Tabsy CSS - Бібліотека лише для CSS для створення простих компонентів, таких як вкладки. Ця бібліотека, на відміну від деяких з перерахованих вище, не потребує залежностей - навіть жодного JS-коду. [Демо]

Tabbis.js - Tabbis - простий, але розширений плагін. Використовуючи свої додаткові параметри конфігурації, ви можете створювати вкладені вкладки та визначати зворотні виклики теж. [Демо]

Відповідні чисті вкладки CSS [Демо]

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

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

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

Адаптивні вкладки Flexbox [Демо]

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

tabs.js - tabs.js є чистою бібліотекою вкладок JavaScript, натхненної Аккордеон / Вкладки Бурбон Refills. Це реагує на те, що вкладки змінюються на акордеони на невеликих екранах. [Демо]

WellTabber - WellTabber - це ще один простий плагін JavaScript, як Tabby. Як і останній, він підтримує різні параметри для налаштування вкладок. Також можна показувати стрілки навігації. [Демо]

Інтерфейс вкладеного 3D куба [Демо]

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

Змінні висоти з вкладками CSS [Демо]

Матеріал дизайну вкладки - Матеріал дизайну натхненний фрагмент вкладок побудований з використанням Vanilla JavaScript. це є простий у використанні та настроюється також. Однак він не містить розширених параметрів. [Демо]

Анімовані вкладки CSS - Анімовані вкладки CSS - це вкладки, що використовують лише CSS, що дозволяє створювати прості, легкі вкладки. На відміну від Tabby або 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 - це плагін для побудови майстрів структури з табличками. Я помітив, що ви можете створити лише вкладки, приховуючи або видаляючи наступні та попередні кнопки. [Демо]

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

Відповідні вкладки CSS [Демо]

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

Відповідальний акордіон на вкладки - Реагуюча аккордеон на вкладки, як випливає з назви, працює як гармошка або вкладки на основі ширини екрана. Це показує, якщо можливо, ще вкладки, якщо розмір невеликий. [Демо]

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

Арія вкладок [Демо]

Мінімальні та сексуальні вкладки - Красивий новий фрагмент вкладок доступні в двох колірних схемах - світлі і темні. Він побудований з використанням jQuery, тому він не такий легкий, як деякі інші додатки, перераховані вище. [Демо]

Віджет-вкладка [Демо]

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

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

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

Вкладки jQuery - Вкладки jQuery - це простий плагін для створення вкладок. Як випливає з назви, це так побудований з використанням jQuery, на відміну від деяких перелічених вище плагінів які побудовані з чистим CSS або JavaScript. [Демо]

jQuery rTabs [Демо]

Примітка редактора: Ця посада спочатку була опублікована в червні 2008 року і була оновлена ​​у квітні 2018 року на основі нового вмісту.