В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием 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>

Теперь 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;
}

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

Добавить в закладки
  • del.ici.ous
  • Digg
  • Furl
  • Google
  • Simpy
  • Spurl
  • Y! MyWeb
  • БобрДобр
  • Мистер Вонг
  • Яндекс.Закладки
  • Текст 2.0
  • News2
  • AddScoop
  • RuSpace
  • RUmarkz
  • Memori
  • Закладки Google
  • Писали
  • СМИ 2
  • Моё Место
  • Сто Закладок
  • Ваау!
  • Technorati
  • RuCity
  • LinkStore
  • NewsLand
  • Lopas
  • Закладки - I.UA
  • Connotea
  • Bibsonomy
  • Trucking Bookmarks
  • Communizm
  • UCA

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

14
Апр
2008

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

  1. Иван Маркеев says:

    Рабочий пример не работает в IE6

  2. Vladimir says:

    Иван, большое спасибо — при merge потерялся #accordion в последнем правиле. Сейчас должно всё работать (пока проверить не могу, ибо шестого ишака под рукой нет).

  3. Вовочка says:

    Всеравно неработает в ie6

  4. Vladimir says:

    Работает… Вы на кэш Сквида смотрели :-)

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

    accordion3_ie6.png

Подписаться на RSS-ленту комментариев к статье «Аккордеон на CSS без использования JavaScript» Trackback URL: http://blog.sjinks.org.ua/css/100-css-accordion-without-javascript/trackback/

Оставить комментарий к записи «Аккордеон на CSS без использования JavaScript»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя