Горизонтальное разворачивающееся меню на CSS с помощью псевдокласса :target

С помощью псевдокласса :target можно создать очень многое, например, интересные интерактивные элементы, которые раньше требовали сложных скриптов JavaScript.  Мы уже создавали переключение между вкладками и вертикальное разворачивающееся меню. В этом уроке мы расскажем о создании горизонтального разворачивающегося меню с помощью той же разметки HTML5. 

Посмотрите демонстрацию работы

Этот способ работает в браузерах Internet Explorer от версии 9, Chrome, Firefox, Safari и Opera, и для его работы не требуется JavaScript или изображения. В браузерах Internet Explorer версий 6, 7 и 8 это решения тоже не будет работать, так что можно использоваться, например, библиотеку JavaScript selectivizr или другой обходной путь.

Код HTML 

Этот код HTML5 такой же, как код, использованный для создания вертикального разворачивающегося меню: несколько элементов разделов с нажимаемыми заголовками, содержащих теги h2:

<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>

Код CSS 

Этот код CSS немного более сложный, но он того стоит. Сначала зададим стили внешнему блоку статей:

article.accordion { display: block; width: 43em; margin: 0 auto; background-color: #666; overflow: auto; border-radius: 5px; box-shadow: 0 3px 3px rgba(0,0,0,0.3); }

Каждый раздел сначала закрыт, разделы всплывают влево и их ширина — 2em. Значение свойства переполнения задано как скрытое, а также цвет текста такой же, как цвет фона, чтобы блоки выглядели пустыми:

article.accordion section { position: relative; display: block; float: left; width: 2em; height: 12em; margin: 0.5em 0 0.5em 0.5em; color: #333; background-color: #333; overflow: hidden; border-radius: 3px; }

Теперь перейдем к более сложному коду CSS3 с приставками производителей. У каждого тега h2 название поворачивается на 90 градусов против часовой стрелки при помощи свойства трансформации и абсолютного позиционирования над закрытым блоком раздела:

article.accordion section h2 { position: absolute; font-size: 1em; font-weight: bold; width: 12em; height: 2em; top: 12em; left: 0; text-indent: 1em; padding: 0; margin: 0; color: #ddd; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } 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 { width: 30em; padding: 0 1em; color: #333; background-color: #fff; } article.accordion section:target h2 { position: static; font-size: 1.3em; text-indent: 0; color: #333; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }

Все готово, но добавим переход 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; }

Посмотрите демонстрацию работы

К сожалению, пользователи старых версий браузера Internet Explorer, таких как 6, 7 и 8, не смогут увидеть этот интерактивный элемент. Пользователи браузера Internet Explorer версии 9 не увидят анимацию. Но чтобы создать такой эффект с помощью JavaScript, понадобится очень много времени и терпения. Попробуйте поэкспериментировать с приведенными примерами.