Адаптивні вкладки для сайту
Вкладки для сайту.
Створення, розробка, виготовлення сайтів | WEB-STYDIA.COM

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

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

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

У сьогоднішній статті я хотів би ознайомити вас з цікавою можливістю створення компактного виду блоку вкладок (табів), і використанням CSS розмітки і JS коду.

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

Створення вкладок і використання їх на своєму сайті дуже корисно і зручно, так як це дозволяє розмістити на одній сторінці сайту максимум інформації і не сильно розтягнути саму сторінку.

Ну що ж коротку передмову написав :) тепер давайте приступимо до виконання самого завдання, і створимо вже наші вкладки для сайту.

 

Приклад того як будуть виглядати створені вкладки ви можете подивитися на фото нижче:

Ну або ж ви можете подивитися живий приклад вкладок на нашому сайті:

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



Пункт перший HTML:

Насамперед що ми зробимо так це підключимо до нашої сторінці скрипти js, підключимо їх на самому початку сайту рекомендовано до тега body.

Зверніть увагу: Якщо у вас на сайті вже підключений jQuery то другий раз його підключати не потрібно, так як це може викликати конфлікт скриптів, що спричинить не працездатність створюваних вкладок, так і в цілому JS скриптів на вашому сайті.

Далі додаємо на сторінку html блок з розміткою наших вкладок:

 

Пункт другий CSS:

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

В кінцевому підсумку у нас вийшли ідеальні вкладки які додадуть новий вид вашому сайту, і допоможуть заощадити величезну кількість його простору.

Будемо раді якщо дана стаття буде вам корисною!

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.