Apr 14, 2008

Аккордеон на CSS без использования JavaScript

Рубрика: CSS, HTML
Tags: accordion, CSS, XHTML, аккордеон
Vladimir @ 21:17
RSS 2.0

Простой аккоржеон без использования JavaScript

В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML).

IE6 потребуется несколько иная разметка, чем нормальным браузерам (об этом можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript"), поэтому я сразу привожу разметку, которая подойдёт для всех браузеров (за основу взята разметка из статьи "парочка аккордеонов"):

[-]

View Code HTML

<ul id="accordion">
<li>
<a href="#">Item 1</a>

<ul>
<li><a href="#">SubItem 1.1</a></li>
<li><a href="#">SubItem 1.2</a></li>
<li><a href="#">SubItem 1.3</a></li>
<li><a href="#">SubItem 1.4</a></li>
</ul>

</li>

<li class="active">
<a href="#">Item 2</a>

<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>

</li>

<li>
<a href="#">Item 3</a>

<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>

</li>

<li>
<a href="#">Item 4</a>

<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>

</li>
</ul>

Теперь CSS для нормальных браузеров:

[-]

View Code CSS

a { text-decoration: none; color: #00F; }
a:hover { text-decoration: underline; }
#accordion a { outline: 0; }

#accordion, #accordion ul, #accordion li {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

#accordion {
border: 1px solid #CCC;
width: 150px;
}

#accordion ul {
margin-left: 40px;
}

#accordion > li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

/* Update 11-May-2008: в IE7 эта конструкция не работает
#accordion > li:not([class="active"]) ul {
display: none;
}
/**/
/* Для максимальной совместимости с IE7 используем следующие
два правила (их теоретически можно было сделать видимыми только
для IE7, но смысла загромождать код нет :-) ). Легко заметить, что
эти два правила есть инверсия предыдущего закомментированного правила */
#accordion > li[class="active"] ul {
display: block;
}

#accordion > li ul {
display: none;
}

#accordion > li:hover ul {
display: block;
}

#accordion > li:last-child {
border-bottom: 0;
}

#accordion li.active > a {
color: red;
}

Не забудем про IE6:

[-]

View Code CSS

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

/* IE7 не понимает last-child */
*:first-child+html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

* html #accordion li table {
display: none;
}

* html #accordion li.active table {
display: block;
}

* html #accordion li a:hover {
position: static;
}

/* Спасибо Ивану Маркееву (http://markeev.labwr.ru) за замеченную опечатку */
* html #accordion li a:hover table {
display: block;
}

Рабочий пример.

Связанные записи

Комментарии к статье "Аккордеон на CSS без использования JavaScript" (4) »

[May 10, 2008 17:57] Иван Маркеев:
Рабочий пример не работает в IE6

#1
[May 11, 2008 18:29] Vladimir:
Иван, большое спасибо — при merge потерялся #accordion в последнем правиле. Сейчас должно всё работать (пока проверить не могу, ибо шестого ишака под рукой нет).

#2
[July 12, 2008 21:17] Вовочка:
Всеравно неработает в ie6

#3
[July 12, 2008 22:55] Vladimir:
Работает… Вы на кэш Сквида смотрели

Скриншот со страницы прикреплён к комментарию.

accordion3_ie6.png

#4