Главная » Гаджеты » Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

Всем привет дамы и господа! В этот почти предпраздничный день я решил посвятить себя написанию очень классной, на мой взгляд, статьи – как сделать красивые табы (или вкладки) html CSS на сайт.

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

На нем, а точнее на его главной странице мы и будем производить технические «манипуляции» и вместо ссылок, которые сейчас на нем есть, будут переключатели в виде привлекательных табов css.

Итак, приступим к нашей «магии».

Приступим к работе


На данном этапе работы у нас есть главная страница сайта, которая имеет следующий вид (все скриншоты кликабельные):

Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

 

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

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

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

Смотреть Демо

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

Ок. Теперь давайте все разбирать по шагам, что конкретно делал я.

Шаг 1. Установка html кода для вставки табов


Первое, что нам предстоит на данном этапе работы это скопировать и вставить в нужный участок страницы вот этот код с табами:

  • Кровельные работы
  • Штукатурные работы
  • Отделочные работы
Узнайте цены на кровельные работы в Калининграде
Штукатурные работы в Калининграде
Отделочные работы

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

Этот фрагмент кода я вставил вот таким образом у себя на странице клиентского сайта:

Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

 

Теперь давайте перейдем ко второму шагу.

Шаг 2. Установка CSS кода для табов


Здесь мы будем придавать стиль нашим вкладкам. Их я рекомендую, как и скрипты, выносить в отдельный файлик. В нашем примере файлы стилей у меня находятся в style.css

Чтобы не запутаться я просто вставлю css код в самый конец. Вот его пример:

#tabs {
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#tabs li {
margin: 0;
padding: 0;
float: left;
}
#tabs a {
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 17px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}
#tabs a:hover {
background: #c93434;
background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
background:         linear-gradient(220deg, transparent 10px, #c93434 10px);
}
#tabs a:focus {
outline: 0;
}
#tabs #current a {
background: #fff;
background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
background:         linear-gradient(220deg, transparent 10px, #fff 10px);
text-shadow: none;
color: #333;
}
#content {
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image:    -moz-linear-gradient(top, #fff, #ddd);
background-image:     -ms-linear-gradient(top, #fff, #ddd);
background-image:      -o-linear-gradient(top, #fff, #ddd);
background-image:         linear-gradient(top, #fff, #ddd);
-moz-border-radius: 0 2px 2px 2px;
-webkit-border-radius: 0 2px 2px 2px;
border-radius: 0 2px 2px 2px;
-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
margin-bottom: 15px;
}

Не заморачивайтесь, просто берете и копируете его как есть. Есть единственное уточнение и нюанс.

Высоту контента для каждой вкладки формирует отступ

padding

 . В моем примере он составляет 

30px

 . Если вы хотите добавить фиксированную высота блока, тогда вам нужно создать вот такое правило:

#content div {
    height: 220px;
}

И вставляете его в самый конец приведенного выше css кода. Я думаю здесь все понятно и так. С этим моментом разобрались. Теперь переходим к подключению библиотеки Jquery.

Шаг 3. Подключаем динамическую Jquery библиотеку для табов


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

В моем случае сайт клиента выполнен на CMS WordPress. Что сделал я?

Подключил библиотеку Jquery через прямую ссылку,которую взял у Google. Вы можете туда не заходить, а скачать прямо отсюда. Вот она:


Вставлять мы ее будем между служебными тегами


  в шаблоне заголовка 

header.php

Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

 

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


А вот куда его нужно вставить:

Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

 

Теперь сохраняем все изменения и посмотрим, что получилось в браузере на нашем примере:

Учимся делать красивые табы (влкадки) с помощью CSS и Jquery

 

Классно смотрится! Мне, лично нравится, не знаю как заказчики, но все четко. Это не последняя статья по вкладкам (табам) CSS. Впереди вас ждут сервисы, обзоры и много чего интересного и полезного. Увидимся в следующих выпусках.

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Check Also

Продажи Apple Watch в 2016 году снизятся, несмотря на запуск Apple Watch Series 2

Аналитик Мин-Чи Куо (Ming-Chi Kuo) из KGI прогнозирует снижение продаж Apple Watch в 2016 году. Спрос на умные часы Apple Watch падает, несмотря на появление новых моделей и снижение цен на старые. В своём новом ...

Рейтинг@Mail.ru