• 2349
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Продолжим тему адаптивного дизайна,сегодня я распишу подробно как поставить адаптивные вкладки на ваш сайт.
Немного кода на jQuery + один CSS файл и классные адаптивные вкладки готовы.
Внешний вид настраивается стилями. При уменьшении размера окна браузера до заданного в

Код:
@media{}
вкладки из горизонтальных преобразуются в вертикальный аккордион.
Итак приступим
1.Скачать исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Там где хотите видеть вкладки добавляете этот код
Код:
<ul class="accordion-tabs">
<li class="tab-head-cont">
<a href="#" class="is-active">Вкладка</a>
<section>
<p>Отличные вкладки использующие несколько строк кода.
Требуется подключение jQuery.
Вкладки преобразуются в вертикальный аккордион при изменении размера окна браузера.
Для изменения внешнего вида и параметров при которых происходит переход в адаптивный
режим следует править файл стилей style.css</p>
</section>
</li>
<li class="tab-head-cont">
<a href="#">Вторая вкладка</a>
<section>
<p>............</p>
</section>
</li>
<li class="tab-head-cont">
<a href="#">Третья</a>
<section>
<p>.........</p>
</section>
</li>
<li class="tab-head-cont">
<a href="#">Последняя</a>
<section>
<p>.........</p>
</section>
</li>
</ul>
3.В файл стилей добавим стили вкладок
Код:
/* TABS */
.accordion-tabs {
*zoom: 1;
width: 100%;
border: 1px solid #dddddd;
border-radius: 0.1875em;
margin-bottom: 1.5em;
margin-left:0;
padding-left:0;
}
.accordion-tabs:before,
.accordion-tabs:after {
content: " ";
display: table;
}
.accordion-tabs:after {
clear: both;
}
.accordion-tabs li{
list-style:none;
}
.accordion-tabs li.tab-head-cont:first-child a {
border-top-left-radius: 0.1875em;
border-top-right-radius: 0.1875em;
border-top: 0;
}
.accordion-tabs li.tab-head-cont:last-child a {
border-bottom-left-radius: 0.1875em;
border-bottom-right-radius: 0.1875em;
}
.accordion-tabs li.tab-head-cont a {
text-decoration:none;
border-top: 1px solid #dddddd;
color: #888888;
display: block;
padding: 0.75em 0.809em;
}
.accordion-tabs li.tab-head-cont a:hover {
color: #000000;
}
.accordion-tabs li.tab-head-cont a:focus {
outline: none;
}
.accordion-tabs li.tab-head-cont a.is-active {
background-color: #f7f7f7;
border-bottom: 0;
color:#333333;
}
.accordion-tabs li.tab-head-cont section {
padding: 1.5em 1.618em;
background: #f7f7f7;
display: none;
overflow: hidden;
width: 100%;
}

/* RESPONSIVE */
@media screen and (min-width: 40em) {
.accordion-tabs {
border: none;
position: relative;
}
.accordion-tabs li.tab-head-cont {
display: inline;
}
.accordion-tabs li.tab-head-cont:last-child a {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.accordion-tabs li.tab-head-cont a {
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
border-top: 0;
border-top-right-radius: 0.1875em;
border-top-left-radius: 0.1875em;
}
.accordion-tabs li.tab-head-cont a.is-active {
background-color: #f7f7f7;
border: 1px solid #dddddd;
border-bottom: 1px solid #f7f7f7;
margin-bottom: -1px;
}
.accordion-tabs li.tab-head-cont section {
border-bottom-left-radius: 0.1875em;
border-bottom-right-radius: 0.1875em;
border: 1px solid #dddddd;
float: left;
left: 0;
padding: 0.75em 0.809em;
}
.accordion-tabs li.tab-head-cont section p {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}
5.Для работы скрипта нужно подключить jQuery библиотеку,если еще не подключено.
И подключить ниже следующий скрипт :
Код:
<script>
$(document).ready(function () {
$('.accordion-tabs').children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
$('.accordion-tabs').on('click', 'li > a', function(event) {
if (!$(this).hasClass('is-active')) {
event.preventDefault();
$('.accordion-tabs .is-open').removeClass('is-open').hide();
$(this).next().toggleClass('is-open').toggle();
$('.accordion-tabs').find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
} else {
event.preventDefault();
}
});
});
</script>
6.Ну вот и все .

Можешь почитать и вот эту статейку "Расширяем профиль юзера"

mistakes

Это тоже интересно

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element