Недавно мы создали элемент управления вкладкой «Только CSS3», в котором использовался мощный селектор: target . Одним из основных преимуществ CSS является то, что мы можем изменить стиль HTML так, как нам нравится; поэтому мы собираемся превратить нашу разметку в вертикальную гармошку.
Посмотреть демонстрационную страницу …
Решение работает в IE9, Chrome, Firefox, Safari и Opera и не требует JavaScript или изображений. В IE6, 7 и 8 он терпит неудачу, так что вы можете либо использовать selectivizr shim, либо скрыть виджет от этих пользователей и сказать им обновить.
HTML
Наш HTML5-код идентичен тому, который используется элементом управления tab . Я только изменил класс article на «аккордеон» и переименовал некоторые идентификаторы, чтобы было легче понять, что происходит. Есть также пять разделов, так как это выглядит немного лучше:
<article class="accordion"> <section id="acc1"> <h2><a href="#acc1">Title One</a></h2> <p>This content appears on page 1.</p> </section> <section id="acc2"> <h2><a href="#acc2">Title Two</a></h2> <p>This content appears on page 2.</p> </section> <section id="acc3"> <h2><a href="#acc3">Title Three</a></h2> <p>This content appears on page 3.</p> </section> <section id="acc4"> <h2><a href="#acc4">Title Four</a></h2> <p>This content appears on page 4.</p> </section> <section id="acc5"> <h2><a href="#acc5">Title Five</a></h2> <p>This content appears on page 5.</p> </section> </article>
Как и прежде, кликабельный заголовок раздела содержится в каждом section как начальный тег h2 .
CSS
Сначала мы будем article контейнер article и элементы section . Каждый раздел начинается в закрытом состоянии с высоты 2em (обратите внимание, что переполнение установлено на скрытый ):
article.accordion { display: block; width: 30em; padding: 0.5em 0.5em 1px 0.5em; margin: 0 auto; background-color: #666; border-radius: 5px; box-shadow: 0 3px 3px rgba(0,0,0,0.3); } article.accordion section { display: block; width: 28em; height: 2em; padding: 0 1em; margin: 0 0 0.5em 0; color: #333; background-color: #333; overflow: hidden; border-radius: 3px; }
Заголовок раздела теперь стилизован для использования всей доступной комнаты в закрытом состоянии:
article.accordion section h2 { font-size: 1em; font-weight: bold; width: 100%; line-height: 2em; padding: 0; margin: 0; color: #ddd; } article.accordion section h2 a { display: block; width: 100%; line-height: 2em; text-decoration: none; color: inherit; outline: 0 none; }
Теперь мы можем «открыть» активную секцию, используя селектор: target. Мы устанавливаем большую высоту и цвет фона, затем увеличиваем и перекрашиваем заголовок:
article.accordion section:target { height: 15em; background-color: #fff; } article.accordion section:target h2 { font-size: 1.6em; color: #333; }
При необходимости вы можете установить высоту section auto чтобы она использовала минимальное пространство, которое требуется. Однако это делает невозможным добавление хороших переходов CSS3, которые плавно изменяют размер элемента…
article.accordion section, article.accordion section h2 { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
Посмотреть демонстрационную страницу …
Во всяком случае, этот CSS проще, чем элемент управления Tab и выглядит лучше. Но вертикальные аккордеоны легки — горизонтальные намного круче !…