Создаем адаптивные вкладки для сайта

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

В связи с этим большинство вебмастеров переделывают свои сайты именно под адаптивную или резиновую верстку, что бы их сайт одинаково выглядел на любом устройстве.

Вот и мы сегодня поговорим об адаптивности немного, и попытаемся сделать для нашего сайта адаптивные вкладки, которые будут идеально смотреться на любом устройстве.

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

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

Создание вкладок и использование их на своем сайте очень полезно и удобно , так как это позволяет разместить на одной странице сайта максимум информации и не сильно растянуть саму страницу.

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

 

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

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

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

Пункт первый HTML:

Первым делом что мы сделаем так это подключим к нашей странице скрипты js, подключаем их в самом начале сайта рекомендовано до тега body .

Обратите внимание: Если у вас на сайте уже подключен  jQuery то второй раз его подключать не нужно, так как это может вызвать конфликт скриптов ,  что повлечет за собой не работоспособность создаваемых вкладок, да и в целом JS скриптов на вашем сайте.

Далее добавляем на страницу html блок с разметкой наших вкладок:

 

Пункт второй CSS:

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

В конечном итоге у нас получились идеальные вкладки которые придадут новый вид вашему сайту, и помогут сэкономить огромное количество его пространства.

Будем рады если данная статья будет вам полезной!