Вкладки (Табы/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 редактора текстов

Для установки модуля редактора текстов (будем использовать редактор текстов FCKeditor и модуль его интеграции в Drupal c аналогичным именем (как у редактора текстов)), скачаем его

Mac OS
help2site
Подключение к VPN-серверу из Mac OS X

В этой статье мы разберемся в процессе подключения к VPN-серверу для пользователей операционной системы Mac OS. Как настроить VPN-сервер на Windows server 2008 мы описывали в предыдущей статье 1. Откройте Finder, выберите пункт «Программы» и

Оборудование
help2site
CHKDSK, система перезагружается при запуске

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

Web-Дизайн
help2site
Как очистить очередь сообщений postfix

Для начала давайте разберемся что такое Postfix? Postfix — это агент передачи почты (MTA — mail transfer agent). Postfix — это свободное программное обеспечение. Архитектура

Windows
help2site
Активация терминального сервера Windows Server 2003/2008/2008 R2

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

Оборудование
help2site
Ремонт компьютера с помощью безопасного режима

Оглавление Безопасный режим Windows — помощник при ремонте компьютера Рассмотрим ремонт компьютера в безопасный режиме и диагностика, если по каким-то причинам запуск операционной системы windows