Разное

Табы html css – Адаптивные вкладки (табы) на CSS3

15.12.2019

Адаптивные табы на чистом CSS

/* Базовый контейнер табов */

.tabs {

min-width: 320px;

max-width: 800px;

padding: 0px;

margin: 0 auto;

}

/* стили секций с содержанием */

section {

display: none;

padding: 15px;

background: #fff;

border: 1px solid #ddd;

}

.tabs input {

display: none;

}

/* стили вкладок (табов) */

.tabs label {

display: inline-block;

margin: 0 0 -1px;

padding: 15px 25px;

font-weight: 600;

text-align: center;

color: #aaa;

border: 1px solid #ddd;

background: #f1f1f1;

border-radius: 3px 3px 0 0;

}

/* шрифт-иконки от Font Awesome в формате Unicode */

.tabs label:before {

font-family: fontawesome;

font-weight: normal;

margin-right: 10px;

}

.tabs label[for*=»1″]:before {

content: «\f19a»;

}

.tabs label[for*=»2″]:before {

content: «\f17a»;

}

.tabs label[for*=»3″]:before {

content: «\f13b»;

}

.tabs label[for*=»4″]:before {

content: «\f13c»;

}

/* изменения стиля заголовков вкладок при наведении */

.tabs label:hover {

color: #888;

cursor: pointer;

}

/* стили для активной вкладки */

.tabs input:checked + label {

color: #555;

border: 1px solid #ddd;

border-top: 1px solid #009933;

border-bottom: 1px solid #fff;

background: #fff;

}

/* активация секций с помощью переключателя :checked */

#tab1:checked ~ #content1,

#tab2:checked ~ #content2,

#tab3:checked ~ #content3,

#tab4:checked ~ #content4 {

display: block;

}

/* медиа запросы для различных типов носителей */

@media screen and (max-width: 680px) {

.tabs label {

font-size: 0;

}

 

.tabs label:before {

margin: 0;

font-size: 18px;

}

}

@media screen and (max-width: 400px) {

.tabs label {

padding: 15px;

}

}

max-webs.com

Табы с помощью CSS3

Табы на мой взгляд являются одним из лучших решений для тематического структурирования информации, а также  для компактного предоставления контента пользователю на одной странице. Сегодня мы разберемся как создать такую функциональную штучку без использования Javascript на одних лишь HTML и CSS3.


Смотреть ДемоДля создания табов мы будем использоваться тег input и CSS селектером :checked. Впервую очередь нам понадобиться создать разметку страницы на HTML

<section>
<input type="radio" name="tab" checked="checked" />
<input type="radio" name="tab" />
<input type="radio" name="tab" />
<label for="tab_1">Tab One</label>
<label for="tab_2">Tab Two</label>
<label for="tab_3">Tab Three</label>
<div></div>

<div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
<div>
<p></p>
</div>
</div>
</section>

Нажатие на радио-боксы будет активировать соответствующие табы. Первому input выставляем атрибут checked=”checked”, это позволит  сделать первый таб по умолчанию открытым. Сами радио-боксы мы спрячем, а для нажатия на них нам послужит тег label. В блоке .tabs_cont у нас будет находятся блоки с табами в которых и разместится контент (текст, картинки и т.д.) . Пока все просто.

Переходим к CSS стилям

CSS



.tabs {
position: relative;
margin: 0 auto;
width: 800px;
}
.tabs label {
color: #555;
cursor: pointer;
display: block;
float: left;
width: 150px;
height: 45px;
line-height: 45px;
position: relative;
top: 2px;
text-align: center;
}

.tabs input {
position: absolute;
left: -9999px;
}

#tab_1:checked ~ #tab_l1,
#tab_2:checked ~ #tab_l2,
#tab_3:checked ~ #tab_l3 {
background: #fff;
border-color: #fff;
top: 0;
z-index: 3;
}

.tabs_cont {
background: #fff;
position: relative;
z-index: 2;
height: 230px;
}


Здесь мы при помощи стилей делаем тег label блочным элементом и задаем ему размеры, место расположение и внешний вид(вы можете задать свои стили для фона и границ) так как нам требуется, а так же прячем

input‘ы с помощью абсолютного позиционирования.

Далее пойдет тот самый селектор :checked о котором мы упоминали в начале. Простыми словами, если радио-бокс с id #tab_1 выбран/отмечен, то применяюеся стили к блоку с id #tab_l1 ну и так далее по аналогии. В нашем случае мы применяем стили к выбранному названию таба. Ну и в конце задаем стили к блоку с контентом табов.

Следущая наша задача это сделать так чтобы наши табы могли переключаться. Для реализации данной задачи следующие стили:



.tabs_cont &amp;gt; div {
position: absolute;
left: -9999px;
top: 0;
opacity: 0;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
position: static;
left: 0;
opacity: 1;
}


Прежде спрячем все наши табы. Самое простое решение это использовать display: none;, но так как нам нужна плавность, легкие пути не для нас, по этому при помощи position: absolute;  передвигаем наши блоки за границы видимости, да еще делаем этот блок полностью прозрачным при помощи свойства opacity: 0; и плавно поднимаем это значение до единицы. Добиться плавности нам поможет свойство transition, которое описано после. Затем опять же воспользуемся селектором :checked при помощи которого делаем видимыми блоки соответствующие выбраным радио-боксам.

На этом все! Самостоятельно поработав со стилями вы сможете изменить внешний вид на свой вкус.

Ниже вы можете скачать исходники.

afirewall.ru

tabs » Скрипты для сайтов

6 757 Tabs

Адаптивные вкладки — Responsive Tabs

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

3 574 Tabs

Tabulous — плагин вкладок, табов

Tabulous — представляет собой плагин для реализации у себя на сайте блока с вкладками с различными эффектами переключения самих вкладок.

3 393 Tabs

Адаптивные вкладки на jQuery

Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{} вкладки из горизонтальных преобразуются в вертикальный аккордион.

3 675 Tabs

Адаптивные вкладки преобразующиеся в аккордион

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

1 980 Tabs

DOMTab — вкладки на javascript

DOMtab — это jаvascript, который связывает ссылки из списка с секциями контента в виде таб интерфейса. Данные табы очень хорошо поддаются внешнему преобразованию с помощью CSS свойств, что позволит вписать их в любой дизайн. Ни каких jQuery и Mootools библиотек не используется, только чистый jаvascript.

2 706 Tabs

jTabs — плагин вкладок

jTabs — плагин вкладок использующий jQuery.

2 687 Tabs

Универсальные вкладки на jQuery

Простая реализация создания горизонтальных или вертикально расположенных вкладок на jQuery с использованием нескольких строк кода для управления вкладками.

3 163 Tabs

Ajax вкладки

Сделаем вкладки (tabs) используя jQuery и технологию ajax для подгрузки содержимого из файлов (или базы данных).

1 578 Tabs

Вкладки — tabs

Простая реализация вкладок на jаvascript без подключения сторонних java библиотек.

2 327 Accordion

Гибкий аккордеон

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

1 647 Tabs

Вкладки со скошенными углами

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

2 085 Tabs

Вертикальное tabmenu

Вертикальное меню в котором скрипт создает вкладки из ul и li элементов. Контент отображается, когда вы наводите курсор мыши на вкладку меню. Скрипт предтсавляет собой комбинацию приёмов CSS и jQuery.

  • Назад
  • 1
  • 2
  • Вперёд

pcvector.net

Сниппет для вкладок (табов) на чистом css3

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

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

 


 

CSS Стили

.tabs {
    width: 100%;
    height: 220px;
}
.tabs ul,
.tabs li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.tabs,
.tabs input[type="radio"]:checked + label {
    position: relative;
}
.tabs li,
.tabs input[type="radio"] + label {
    display: inline-block;
}
.tabs li > div,
.tabs input[type="radio"] {
    position: absolute;
}
.tabs li > div,
.tabs input[type="radio"] + label {
    border: solid 1px #ccc;
}
.tabs {
font: normal 11px Arial, Sans-serif;
    color: #404040;
}
.tabs li {
    vertical-align: top;
}
.tabs li:first-child {
    margin-left: 8px;
}
.tabs li > div {
    top: 33px;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    overflow: auto;
    background: #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.tabs input[type="radio"] + label {
    margin: 0 2px 0 0;
    padding: 0 18px;
    line-height: 32px;
    background: #f1f1f1;
    text-align: center;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.tabs input[type="radio"]:checked + label {
    z-index: 1;
    background: #fff;
    border-bottom-color: #fff;
    cursor: default;
}
.tabs input[type="radio"] {
    opacity: 0;
}
.tabs input[type="radio"] ~ div {
    display: none;
}
.tabs input[type="radio"]:checked:not(:disabled) ~ div {
    display: block;
}
.tabs input[type="radio"]:disabled + label {
    opacity: .5;
    cursor: no-drop;
}

.tabs { width: 100%; height: 220px; } .tabs ul, .tabs li { margin: 0; padding: 0; list-style: none; } .tabs, .tabs input[type=»radio»]:checked + label { position: relative; } .tabs li, .tabs input[type=»radio»] + label { display: inline-block; } .tabs li > div, .tabs input[type=»radio»] { position: absolute; } .tabs li > div, .tabs input[type=»radio»] + label { border: solid 1px #ccc; } .tabs { font: normal 11px Arial, Sans-serif; color: #404040; } .tabs li { vertical-align: top; } .tabs li:first-child { margin-left: 8px; } .tabs li > div { top: 33px; bottom: 0; left: 0; width: 100%; padding: 8px; overflow: auto; background: #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .tabs input[type=»radio»] + label { margin: 0 2px 0 0; padding: 0 18px; line-height: 32px; background: #f1f1f1; text-align: center; border-radius: 5px 5px 0 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .tabs input[type=»radio»]:checked + label { z-index: 1; background: #fff; border-bottom-color: #fff; cursor: default; } .tabs input[type=»radio»] { opacity: 0; } .tabs input[type=»radio»] ~ div { display: none; } .tabs input[type=»radio»]:checked:not(:disabled) ~ div { display: block; } .tabs input[type=»radio»]:disabled + label { opacity: .5; cursor: no-drop; }

 

HTML Каркас

<div>
  <ul>
    <li>
     <input type="radio" name="tabs-0" checked="checked" />
        <label for="tabs-0-0">Вкладка 1</label>
     <div>
        <h4>Преодолевая зло</h4>
         <p>Когда-то в одном маленьком селе жил-был хоббит. Звали его Федулом. Из pодных и близких y него совсем
            никого не было, потому он сладкого ел, сколько лезло, а домой мог девиц водить. И в один прекрасный
            день с ним встречается побитый сосед. И говорит: — Нет ли чего выпить? А то так есть хочется, что
            переночевать негде. Герой делает вид, что занят.Тогда странный собеседник говорит: — Черные всадники
            ищут тебя! И герой вынужден покинуть родные места. Он бежит к знакомым стpанного визитеpа. А
            странный визитер вычищает оставшийся без хозяина дом.
         </p>
    </div>
   </li>
   <li>
     <input type="radio" name="tabs-0" />
       <label for="tabs-0-1">Вкладка 2</label>
     <div>
       <h4>Зловещий повелитель</h4>
        <p>В стародавние времена в одном мусорном контейнере жил-был эльф-полукровка. Звали его Лавруша, но он
           просил чтобы к нему обращались не иначе как Лаврентий Павлович. Из pодных и близких y него была одна
            нянечка, Арина Родионовна.И в один прекрасный день с ним встречается побитый сосед. И говорит: -
            Как, ты еще жив?! Герой в упор его не замечает. Тогда странный собеседник говорит: - Враг у ворот! И
            герой вынужден покинуть родные места. Он бежит, и деревья своими ветвями хлещут его в лицо. А
            странный визитер падает замертво.
         </p>
    </div>
    </li>
    <li>
      <input type="radio" name="tabs-0" />
        <label for="tabs-0-2">Вкладка 3</label>
      <div>
        <h4>Одинокий цветок</h4>
        <p>Когда-то в одном маленьком селе жил-был хулиганистый, задиристый, но очень добрый в душе паренек.
           Звали его как отца, но похож он был на соседа. Из pодных и близких y него была сестрица Аленушка,
           подлюка редкая. И вот однажды к немy подходит стpанно выглядящий человек. И говорит: - Следуй за
           мной! Герой прикидывает, куда бы перепрятать накопленное золотишко. Тогда странный собеседник
           говорит: - Я заболтаю тебя до смерти!
        </p>
      </div>
   </li>
   <li>
     <input type="radio" name="tabs-0" disabled="disabled" />
        <label for="tabs-0-3">Вкладка 4</label>
     <div>
       <h4>Разрушая одиночку</h4>
       <p>Главный злодей растерян. Он-то думал, что это он Хороший, а оказалось совсем наоборот. Не в силах
          перенести это потрясение злодей делает себе харакири двуручным мечом.
          Все делают вид, что счастливы. А главный герой понимает, что исполнил свое предназначение, и теперь он
          может вернуться домой, чтобы в сытости и довольстве прозябать до самой старости.</p>
     </div>
   </li>
  </ul>
</div>

<div> <ul> <li> <input type=»radio» name=»tabs-0″ checked=»checked» /> <label for=»tabs-0-0″>Вкладка 1</label> <div> <h4>Преодолевая зло</h4> <p>Когда-то в одном маленьком селе жил-был хоббит. Звали его Федулом. Из pодных и близких y него совсем никого не было, потому он сладкого ел, сколько лезло, а домой мог девиц водить. И в один прекрасный день с ним встречается побитый сосед. И говорит: — Нет ли чего выпить? А то так есть хочется, что переночевать негде. Герой делает вид, что занят.Тогда странный собеседник говорит: — Черные всадники ищут тебя! И герой вынужден покинуть родные места. Он бежит к знакомым стpанного визитеpа. А странный визитер вычищает оставшийся без хозяина дом. </p> </div> </li> <li> <input type=»radio» name=»tabs-0″ /> <label for=»tabs-0-1″>Вкладка 2</label> <div> <h4>Зловещий повелитель</h4> <p>В стародавние времена в одном мусорном контейнере жил-был эльф-полукровка. Звали его Лавруша, но он просил чтобы к нему обращались не иначе как Лаврентий Павлович. Из pодных и близких y него была одна нянечка, Арина Родионовна.И в один прекрасный день с ним встречается побитый сосед. И говорит: — Как, ты еще жив?! Герой в упор его не замечает. Тогда странный собеседник говорит: — Враг у ворот! И герой вынужден покинуть родные места. Он бежит, и деревья своими ветвями хлещут его в лицо. А странный визитер падает замертво. </p> </div> </li> <li> <input type=»radio» name=»tabs-0″ /> <label for=»tabs-0-2″>Вкладка 3</label> <div> <h4>Одинокий цветок</h4> <p>Когда-то в одном маленьком селе жил-был хулиганистый, задиристый, но очень добрый в душе паренек. Звали его как отца, но похож он был на соседа. Из pодных и близких y него была сестрица Аленушка, подлюка редкая. И вот однажды к немy подходит стpанно выглядящий человек. И говорит: — Следуй за мной! Герой прикидывает, куда бы перепрятать накопленное золотишко. Тогда странный собеседник говорит: — Я заболтаю тебя до смерти! </p> </div> </li> <li> <input type=»radio» name=»tabs-0″ disabled=»disabled» /> <label for=»tabs-0-3″>Вкладка 4</label> <div> <h4>Разрушая одиночку</h4> <p>Главный злодей растерян. Он-то думал, что это он Хороший, а оказалось совсем наоборот. Не в силах перенести это потрясение злодей делает себе харакири двуручным мечом. Все делают вид, что счастливы. А главный герой понимает, что исполнил свое предназначение, и теперь он может вернуться домой, чтобы в сытости и довольстве прозябать до самой старости.</p> </div> </li> </ul> </div>

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

Источник: cssreflex

Удачи! Всех, С Новым годом!

dbmast.ru

Добавить комментарий

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