Вкладки (Табы/Tabs) на чистом CSS

Вкладки (Табы/Tabs) на чистом CSS с интересным эффектом появления — исчезновения, из минусов высоту вкладки нужно задавать в ручную.

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

С 2008 года проводились различные попытки реализовать функционал закладок на чистом CSS без привлечения JavaScript. В основе одного направления лежит использование псевдо-класса :target. Другое направление базируется на псевдо-классе :cheсked для радио кнопок и смежных комбинаторах.

Второе направление показывало гораздо лучший результат, за исключением работы с браузерами семейства WebKit, которые не давали работать вместе селекторам псевдо-класса и смежным комбинаторам. Но в Safari 5.1 и Chrome 13 ошибка наконец-то устранена!

И теперь можно реализовать закладки с использованием псевдо-класса :checked, что, вероятно, станет основным методом для решения данной задачи на несколько лет.

JAVASCRIPT - Не используется.

HTML

				
					<ul class="tabs">
  <li><a href="#one">1</a></li>
  <li><a href="#two">2</a></li>
  <li><a href="#three">3</a></li>
  <li><a href="#four">4</a></li>
  <li><a href="#five">5</a></li>
</ul>
<div class="tabs-content">
<ul>
  <li id="one">Содержимое 1-й вкладки</li>
  <li id="two">Содержимое 2-й вкладки</li>
  <li id="three">Содержимое 3-й вкладки</li>
  <li id="four">Содержимое 4-й вкладки</li>
  <li id="five">Содержимое 5-й вкладки</li>
</ul>
</div>
				
			

CSS

				
					.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content ul {
    list-style: none
    height: 320px;
    overflow: scroll;
    overflow-y: hidden;
}
.tabs-content ul li {
    width:960px;
    height:300px;
}
				
			

В чем польза от данного метода?

  • Доступность. Радио кнопки скрываются с помощью свойства display: none, поэтому программы для чтения с экрана не будут видеть их и сбиваться. А содержание не использует свойства display: none; и остается доступным.
  • Работает в Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, и IE 9+.
Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Windows
help2site
Перегрев процессоров компьютера с ОС Windows 7

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

Windows
help2site
Что делать, если Svchost сильно грузит процессор?

Svchost.exe (сервис-хост) или хост-процесс для служб Windows — компонент операционных систем Microsoft, используемый для запуска и выполнения служб из dll-файлов (динамически подключаемых библиотек). Если по-простому,

Интернет
help2site
Купить планшет за границей

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

Оборудование
help2site
Как выгодно купить новый компьютер

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

Windows
help2site
Не запускается рабочий стол Windows 7

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

Web-Дизайн
help2site
SEO Plugin by SQUIRRLY

Для того чтобы занять максимально высокие места в поисковых системах, ваш контент должен быть одновременно и SEO — дружественным и удобным для чтения. Squirrly является

Windows
help2site
Rufus — как создать загрузочную флешку?

Rufus – отличная утилита для создания загрузочной флешки. Бесплатная, простая в использовании и универсальная. С её помощью можно записать образ Windows XP, 7, 8 или

Web-Дизайн
help2site
Бизнес сайт на wordpress

Сайт на wordpress: юзабилити & некоторые «фишечки». Бизнес сайт на wordpress для заработка в сети интернет – это … Даже если вы не интернет-предприниматель и