Создаем на сайте меню аккордеон средствами CSS

Что такое аккордеон и с чем его едят?

В первую очередь хочу Вас заверить, что Вы не ошиблись и это не блог музыкальной консерватории. Сегодня в данной статье пойдет речь о так называемом «аккордеоне».

Такое название носит разновидность меню, которое при клике на выбранный раздел показывает описание к этому разделу или же перечень ссылок на подразделы.

Такое решение для меню является своеродным нетрадиционном методом оформления навигации на сайте, что несомненно будет привлекать пользователей ресурса. К основным преимуществам аккордеона относят его характеристики юзабилити. Это простой и действенный способ разместить большой объем информации на ограниченном пространстве сайта.

Создаем аккордеон на базе CSS

Меню данного типа можно легко создать, используя jQuery. В этом случае нужно будет проследить чтобы библиотека на которой работает меню ни с чем другим не конфликтовала и все корректно работало во всех видах браузеров. Мы предлагаем более простое решение этой загвоздки. Создание вертикального меню типа аккордеон на основе CSS обеспечит не только хорошую кроссбраузерность, но и сократит объем кода исполняемого на странице, что тоже не мало важно.

Однако не стоит забывать о неповторимом Internet Explorer. Даже при использовании общепринятых правил CSS он требует особого внимания в виде js-кода, который нормализует его работу с таким кодом. В прочем если Вас не сильно волнуют 7 и более ранние версии этого браузера, можете не обращать внимания на это замечание.

Принцип работы этого способа создания меню не имеет ничего сложного. Двумя основными столбами, на которых держится гармошка, написанная средствами CSS, являются свойства :target (больше о нем можно узнать в статье о псевдоклассах CSS) и transition.

Ниже показан пример реализации метода:

HTML

<div class="accordMenu">
      <section id="first">
              <h1><a href="#first">Раздел 1</a></h1>
              <div>
                      <p>Выплывающий контент или дополнительные ссылки
 для перехода в соответствующие подразделы</p>
              </div>
      </section>
	  <section id="second">
              <h1><a href="#second">Раздел 2</a></h1>
              <div>
                      <p>Выплывающий контент или дополнительные ссылки
 для перехода в соответствующие подразделы</p>
              </div>
      </section>
	  <section id="third">
              <h1><a href="#third">Раздел 2</a></h1>
              <div>
                      <p>Выплывающий контент или дополнительные ссылки
 для перехода в соответствующие подразделы</p>
              </div>
      </section>
</div>

CSS

.accordMenu h1 + div{
      height: 0;
      overflow: hidden;
      -moz-transition: height 0.3s ease-in-out;
      -webkit-transition: height 0.3s ease-in-out;
      -o-transition: height 0.3s ease-in-out;
      transition: height 0.3s ease-in-out;
}
.accordMenu :target h1 + div{
      height: 100px;
}
h1 a, h1{
      font-size:17px;
      color:#444;
      font-weight:lighter;
      text-transform:uppercase;
      text-decoration:none;
      padding:5px;
}
section {
     background:#eee;
     border:1px solid #c9c9c9c;
}
p {
    padding:5px;
}

Не стоит забывать про особенность работы метода в Internet Explorer. Для так называемого «костыля» для нашего дедушки подойдет множество средств, все зависит от Вашего энтузиазма и фантазии. В указанном примере костыль не используется.

Вот так будет выглядеть работа кода на практике