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

afirewall.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ajax вкладки

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

Вкладки — tabs

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

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

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

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

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

Вертикальное 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