В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием 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<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
<li class="active">
<a href="#">Item 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
<li>
<a href="#">Item 3<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
<li>
<a href="#">Item 4<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
</ul>
<li>
<a href="#">Item 1<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
<li class="active">
<a href="#">Item 2<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<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>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
<li>
<a href="#">Item 3<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</li>
<li>
<a href="#">Item 4<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tbody><tr><td><![endif]-->
<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></tbody></table></a><![endif]-->
</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;
}
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;
}
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;
}
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Рабочий пример не работает в IE6
Иван, большое спасибо — при merge потерялся
#accordionв последнем правиле. Сейчас должно всё работать (пока проверить не могу, ибо шестого ишака под рукой нет).Всеравно неработает в ie6
Работает… Вы на кэш Сквида смотрели
Скриншот со страницы прикреплён к комментарию.
accordion3_ie6.png