В современное время адаптивность имеет огромное значение, так как все больше и больше пользователей используют различные гаджеты для пользования интернетом, и часто посещают различные сайты и веб ресурсы именно с телефонов или планшетов, так как это очень удобно, гаджет всегда с вами в отличии от персонального компьютера.
В связи с этим большинство вебмастеров переделывают свои сайты именно под адаптивную или резиновую верстку, что бы их сайт одинаково выглядел на любом устройстве.
Вот и мы сегодня поговорим об адаптивности немного, и попытаемся сделать для нашего сайта адаптивные вкладки, которые будут идеально смотреться на любом устройстве.
В сегодняшней статье я хотел бы ознакомить вас с интересной возможностью создания компактного вида блока вкладок (табов) , и использованием 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;
/*...*/
}
|
В конечном итоге у нас получились идеальные вкладки которые придадут новый вид вашему сайту, и помогут сэкономить огромное количество его пространства.
Будем рады если данная статья будет вам полезной!
4 комментария
Эти вкладки не адаптивные. Проверьте сами.
Я конечно извиняюсь, но Вы то сами их пробовали ставить?
Возможно правильнее было бы их назвать резиновыми но все же…
Вот пример вкладок на скрине с телефона
Разочарован. Нельзя разместить меню. Убирает маркеры. Может у Вас имеется выход?
Выход есть всегда. но для начала нужно понимать суть и видеть самого пациента.