Вкладки (Табы/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 7 теперь может выводить отчет об энергопотреблении вашего компьютера. Чтобы получить этот отчет, введите в командную строку команду Powercfg. Эта команда создана компанией Microsoft

Web-Дизайн
help2site
Как пишутся скрипты на PHP

Для написания кода на PHP подходит любой текстовый редактор (например Notepad++). Оглавление Размещение PHP на HTML-странице Код скрипта PHP может размещаться непосредственно на HTML-странице. Чтобы

iOS
help2site
Новые полезные функций iPhone 6

Оглавление Новые функций iOS 8, которые следует знать 17 сентября Apple выпустила операционную систему iOS 8 – давайте разберемся какие новые функции появились в новой

Настройка
help2site
Подключить Wi-Fi дома

Сегодня большинство современных квартир и домов оснащено беспроводным Wi-Fi, что позволяет свободно выходить в интернет всем компьютерам и мобильным гаджетам. Если же у вас пока

Настройка
help2site
Как почистить компьютер

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