Вкладки (Табы/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 позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Обновления ядра Drupal

Данная статья адресована для начинающих изучать Drupal. Для CMS — Drupal регулярно выходят новые версии (обновления) в которых вносится изменения по усовершенствованию CMS, исправление ошибок/уязвимостей

Windows
help2site
Назначение клавиш клавиатуры

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

Оборудование
help2site
Почему принтер не печатает? Выясняем причины

Оглавление Что делать, если принтер отказывается нормально печатать Это, как правило, случается в самое неподходящее время — когда вам срочно нужен важный документ, а принтер

Web-Дизайн
help2site
Установка сервера MySQL 5.0

Доброго времени суток! В прошлый раз я рассказывал, как настроить Apache для работы с PHP как с модулем, а сегодня я расскажу как установить и

Web-Дизайн
help2site
Вход в панель управления Drupal

Для входа в панель управления необходимо прописать в браузерной строке или нажать кнопку вход http://название вашего сайта.by/user Вводим логин и пароль: логин: ваш логин пароль:

Ремонт
help2site
Что нужно для ремонта компьютера

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

Оборудование
help2site
Описание центрального процессора компьютера

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