В сучасний час адаптивність має величезне значення, так як все більше і більше користувачів використовують різні гаджети для користування інтернетом, і часто відвідують сайти і веб ресурси саме з телефонів або планшетів, так як це дуже зручно, гаджет завжди з вами на відміну від персонального комп'ютера.
У зв'язку з цим більшість вебмайстрів переробляють свої сайти саме під адаптивну або гумову верстку, що б їх сайт однаково виглядав на будь-якому пристрої.
Ось і ми сьогодні поговоримо про адаптивність трохи, і спробуємо зробити для нашого сайту адаптивні вкладки, які будуть ідеально виглядати на будь-якому пристрої.
У сьогоднішній статті я хотів би ознайомити вас з цікавою можливістю створення компактного виду блоку вкладок (табів), і використанням CSS розмітки і JS коду.
При створенні нашого блоку адаптивних вкладок ми будемо намагатися не використовувати нічого зайвого і громіздкого, і зробимо все з мінімальним набором коду, при цьому ваші вкладки матимуть дуже привабливий вигляд, і у вас з'явиться на сайті красивий сучасний і адаптивний блок вкладок, який ідеально впишеться в будь-яку сторінку вашого сайту, будь то окрема сторінка, бічна колонка або ж будь-яке спливаюче вікно, ваші вкладки будуть ідеально виглядати на будь-якому з розділів сайту.
Створення вкладок і використання їх на своєму сайті дуже корисно і зручно, так як це дозволяє розмістити на одній сторінці сайту максимум інформації і не сильно розтягнути саму сторінку.
Ну що ж коротку передмову написав 
тепер давайте приступимо до виконання самого завдання, і створимо вже наші вкладки для сайту.
Приклад того як будуть виглядати створені вкладки ви можете подивитися на фото нижче:
Ну або ж ви можете подивитися живий приклад вкладок на нашому сайті:
Ви можете завантажити готовий код скрипту вкладок по кнопці вище, ну а нижче ми трохи розберемо сам скрипт і його додавання на ваш сайт.
Пункт перший HTML:
Насамперед що ми зробимо так це підключимо до нашої сторінці скрипти js, підключимо їх на самому початку сайту рекомендовано до тега body.
|
1 2 |
<script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> |
Зверніть увагу: Якщо у вас на сайті вже підключений jQuery то другий раз його підключати не потрібно, так як це може викликати конфлікт скриптів, що спричинить не працездатність створюваних вкладок, так і в цілому JS скриптів на вашому сайті.
Далі додаємо на сторінку html блок з розміткою наших вкладок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div class="cd-tabs"> <nav> <ul class="cd-tabs-navigation"> <li><a data-content="inbox" class="selected" href="#0">Вкладка</a></li> <li><!-- ... --></li> </ul> </nav> <ul class="cd-tabs-content"> <li data-content="inbox" class="selected"> <p>Тут буде Ваш опис</p> </li> <li><!-- ... --></li> </ul> </div> |
Пункт другий CSS:
При створенні вкладок ми будемо використовувати в CSS медіа запити що дозволить нам зробити позиціонування вкладок від горизонтальних до вертикальним і назад. Так як ми прийняли перший мобільний підхід, елемент має визначення: авто, щоб приховати частину невпорядкованого списку - ширина якого вище.
Так само, ми використовували -webkit для прокрутки: сенсорне відображення має плавну прокрутку яка застосовується до елементу:
|
1 2 3 4 5 |
.cd-tabs nav { overflow: auto; -webkit-overflow-scrolling: touch; /*...*/ } |
В кінцевому підсумку у нас вийшли ідеальні вкладки які додадуть новий вид вашому сайту, і допоможуть заощадити величезну кількість його простору.
Будемо раді якщо дана стаття буде вам корисною!
Немає коментарів
Ви можете залишити коментар першим.