Аккордеон меню css – Как доработать аккордеон-меню на CSS 3, построенное на свойстве «transition»? — Хабр Q&A

Сегодня мы создадим вертикальный и горизонтальный аккордеон для содержимого используя лишь технологию CSS3. Конечно, существует огромное множество плагинов, которые позволяют сделать это, но а если пользователь зашел к вам на сайт с отключенным javascript в браузере? А данный аккордеон будет работать правильно даже в этом случае. Если вы создадите аккордеон на CSS, то он будет правильно отображаться для всех пользователей, браузеры которых поддерживают технологию CSS3.

Когда я писал урок о том как сделать меню в виде аккордеона. Возможно кого-то заинтересует:

Пример можно увидеть здесь:

Посмотреть примерСкачать

HTML часть

Структура документа будет состоять из контейнеров <div>, внутри которых находится блок <section>. В этом уроке мы создадим 5 вкладок:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div>
    <section>
        <h3><a href="#about">О нас</a></h3>
        <p>Текст о нас ...</p>
    </section>
    <section>
        <h3><a href="#services">Сервисы</a></h3>
        <p>Текст про сервисы ...</p>
    </section>
    <section>
        <h3><a href="#blog">Блог</a></h3>
        <p>Текст о блоге ...</p>
    </section>
    <section>
        <h3><a href="#portfolio">Портфолио</a></h3>
        <p>Ваше портфолио ...</p>
    </section>
    <section>
        <h3><a href="#contact">Контакты</a></h3>
        <p>Наши контакты ...</p>
    </section>
</div>

Вы добавляете столько блоков <section>, сколько вкладок вам необходимо.

CSS часть

Сначала зададим стиль для основного контейнера:

1
2
3
4
5
6
7
8

.accordion {   
     width:830px;  
     overflow:hidden;   
     margin:10px auto;   
     color:#474747;   
     background:#414141;   
     padding:10px;   
}

Затем для каждой вкладки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.accordion section{   
      float:left;  
      overflow:hidden;   
      color:#333;   
      cursor:pointer;   
      background: #333;   
      margin:3px;   
}  
.accordion section:hover {  
      background:#444;  
} 
.accordion section p {   
      display:none;   
}

Так как открыто обычно одна вкладка, или все закрыты, то необходимо все остальные скрыть, что мы делаем следующим образом:

1
2
3
4
5
6
7
8
9
10
11

.accordion section:after{  
      position:relative;  
      font-size:24px;  
      color:#000;  
      font-weight:bold;  
}  
.accordion section:nth-child(1):after{ content:'1'; }  
.accordion section:nth-child(2):after{ content:'2'; }  
.accordion section:nth-child(3):after{ content:'3'; }  
.accordion section:nth-child(4):after{ content:'4'; }  
.accordion section:nth-child(5):after{ content:'5'; }

С помощью псевдо-селектора :target можно определить выбранную вкладку, а также задать ей стиль:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.accordion section:target {   
      background:#FFF;   
      padding:10px;  
}  
.accordion section:target:hover {   
      background:#FFF;   
}  
.accordion section:target h3 {  
      width:100%;  
}  
.accordion section:target h3 a{   
      color:#333;   
      padding:0;  
}  
.accordion section:target p {  
      display:block;  
}  
.accordion section h3 a{  
      padding:8px 10px;  
      display:block;   
      font-size:16px;   
      font-weight:normal;  
      color:#eee;   
      text-decoration:none;   
}

В этом примере у нас горизонтальный слайдер. Изначально он скрыт и имеет ширину 5%:

1
2
3
4
5
6
7
8

.horizontal section{   
      width:5%;   
      height:250px;   
      -moz-transition: width 0.2s ease-out;   
      -webkit-transition:width 0.2s ease-out;  
      -o-transition:width 0.2s ease-out;  
      transition:width 0.2s ease-out;  
}

Также необходимо позиционировать номера вкладок:

1
2
3
4

.horizontal section:after{  
      top:140px;  
      left:15px;  
}

Затем вкладка раскрывается, т.е. ширина становится 243 пикселя:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.horizontal section h3 {   
     -webkit-transform:rotate(90deg);  
     -moz-transform:rotate(90deg);  
     -o-transform: rotate(90deg);  
     transform: rotate(90deg);  
     width:240px;   
     position:relative;   
     left:-100px;   
     top:85px;  
}   
 
.horizontal :target{   
     width:73%;  
     height:230px;   
}  
.horizontal :target h3{   
     top:0px;  
     left:0;  
     -webkit-transform:rotate(0deg);  
     -moz-transform:rotate(0deg);  
     -o-transform: rotate(0deg);  
     transform: rotate(0deg);   
}

Для вертикального аккордеона стили немного отличаются:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.vertical section{   
    width:100%;   
    height:40px;   
    -webkit-transition:height 0.2s ease-out;  
    -moz-transition:height 0.2s ease-out;  
    -o-transition:height 0.2s ease-out;  
    transition:height 0.2s ease-out;  
}  
 
.vertical :target{   
    height:250px;   
    width:97%;  
}  
 
.vertical section h3 {   
     position:relative;   
     left:0;   
     top:-15px;   
}  
 
.vertical section:after{   
      top:-60px;  
      left:810px;  
}  
 
.vertical section:target:after{   
      left:-9999px;  
}

Вывод

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

Успехов!

Источник: http://www.hongkiat.com/blog/css-content-accordion/

Создаем "аккордеон"-меню на css3

В этом уроке мы будем создавать «аккордеон»-меню. По сколько мы будем создавать меню на чистом css, оно будет работать в браузерах, которые поддерживают селектор псевдо-класса :target.

Демо

Шаг 1 — HTML разметка

Создаем маркированный список с  якорями и тегами  span. Добавляем id для каждого элемента списка и ссылки для этих id. Для того, чтобы применить стили и сделать раскрывающийся список в виде аккордеона, нужно использовать селектор :target. Селектор будет работать, если у нас будет ссылка, которая указывает на id. В такой способ мы сможем сделать sub-menu видимым. 

<ul>

    <li><a href="#one">My Files<span>495</span></a></li>

    <li><a href="#two">Mail<span>26</span></a></li>

    <li><a href="#three">Cloud<span>58</span></a></li>

    <li><a href="#four">Sign Out</a></li>
</ul>

Шаг 2 — Расположение меню и основные стили

Прежде всего, мы добавим некоторые стили, чтобы очистить margins, paddings и другие. 

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.accordion li {
    list-style: none;
}

Теперь добавляем CSS3 градиент, тени и основные стили для текста.  

Меню не будет иметь фиксированную ширину. Оно займет всю ширину своего родителя, поэтому если вы хотите, задать для него ширину 300px  просто создайте див и задайте ему нужную ширину. Мы зададим минимальную ширину 160px 

.accordion li > a {
    display: block;
    position: relative;
    min-width: 110px;
    padding: 0 10px 0 40px;

    color: #fdfdfd;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);

    background: #6c6e74;
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

Для span, который будет содержать некоторые цифры, мы определим серый цвет фона, тени и закругленные углы.

.accordion li > a span {

    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    padding: 0 10px;
    margin-right: 10px;

    font: normal bold 12px/18px Arial, sans-serif;
    background: #404247;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

Шаг 3 — Иконки

Чтобы вставить иконки мы будем использовать селектор :before. Его нужно вставить перед заданным элементом. Таким образом мы можем вставить иконки. Иконки, которые мы будем использовать имеют ширину и высоту 24px на 24px. Мы будем размещать их в левом верхнем углу и задавать небольшие поля.

.accordion > li > a:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    margin: 4px 8px;
    background-repeat: no-repeat;
    background-image: url(../img/icons.png);
    background-position: 0px 0px;
}

 Создаем спрайт изображений, который будет содержать все иконки (нормальный вид и вид при наведении). Преимущество использования спрайтов в том, что мы можем загрузить все иконки одновременно при меньшем количестве запросов. И так как у нас есть только одно изображение, которое будет содержать все иконки, размер соответственно тоже будет меньше. 

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24
 Шаг 4 - Sub-меню

HTML

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

Шаг 4 – Sub-меню

Чтобы создать подменю, создаем еще один список с классом sub-menu, внутри которого будут элементы, которые нужно разместить в подменю.

<li><a href="#one">My Files<span>495</span></a>

    <ul>

        <li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>

        <li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

        <li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

    </ul>
</li>

CSS стили

Стили для ссылок подменю почти аналогичны. Только немного изменим цвета и тени. Также добавим “em” с некоторыми настройками. 

.sub-menu li a {

    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);

    background: #e5e5e5;
    border-bottom: 1px solid #c9c9c9;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {
    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: transparent;
    border: 1px solid #c9c9c9;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sub-menu em {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 14px;
    color: #a6a6a6;
    font: normal 10px/32px Arial, sans-serif;
}

Шаг 5 - Hover и Active

При наведение на элемент основного списка мы будем изменять цвет градиента и стиль span  на зеленый.

.accordion > li:hover > a,
.accordion > li:target > a {
    color: #3e5706;
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);

    /*background: url(../img/active.png) repeat-x;*/
    background: #a5cd4e;
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

.accordion > li:hover > a span,
.accordion > li:target > a span {
    color: #fdfdfd;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #3e5706;
}
.sub-menu li:hover a { background: #efefef; }

Шаг 6 — Показать и скрыть подменю 

Для подменю задаем высоту 0px, чтобы скрыть его и добавляем эффект перехода. Для того чтобы переход слайда работал, нам нужно задать фиксированную высоту подменю. Поэтому, если вы пожелаете в каждое подменю добавить разное количество ссылок, вы должны задать разную высоту каждого подменю в зависимости от количества ссылок. Поскольку в примере только три ссылки, задаем высоту 98px. Вы можете сделать высоту  100% , но в этом случае слайд работать не будет.

.accordion li > .sub-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.accordion li:target > .sub-menu {
    height: 98px;
}

Конечный результат

Демо

Автор - Valeriu Timbuc

Перевод — Дежурка

Меню аккордеон CSS, современный дизайн + 3 варианта!

Сегодня мы будем создавать меню аккордеон css, с помощью псевдо-класса :checked. Используя скрытые input и label, мы создадим меню в виде аккордеона, которое будет открываться и закрываться. Также советую посмотреть статью “Современное CSS3 меню + мобильная версия!”.

Есть много способов создания CSS-аккордеона, большинство из которых реализуются с помощью псевдо-класса :target. Проблема использования этого метода состоит в том, что мы не можем иметь несколько открытых разделов одновременно. Используя скрытые чекбоксы, мы можем контролировать открытие и закрытие. Кроме того, мы можем также использовать радио-кнопки, если мы хотим чтобы была открыта только одна область одновременно.

Пожалуйста, обратите внимание: результат этого урока будет работать только в браузерах, которые поддерживают свойства CSS3.

Итак, давайте начинать!

HTML разметка

В исходниках присутствует 3 варианта меню, но мы рассмотрим те, который использует чекбоксы, где содержание одного из разделов открывается по умолчанию. Все они будут обернуты в обертку с классом ac-container. Для каждого элемента, мы имеем чекбокс, label и текст, который и является содержанием раздела:

Обратите внимание, что мы должны дать каждому элементу input ID, который мы будем далее использовать. Нам нужно это для того, чтобы провести проверку чекбокса при нажатии на label.

Каждая статья имеет класс, который поможет нам определить, до какой высоты можно его расширинить (оптимально, конечно использовать “auto“, как значение высоты, но, к сожалению, в данном случае это не работает).

Давайте посмотрим на стили CSS.

Стилизация CSS

Давайте определим ширину для меню аккордеона и отцентрируем его:

Далее, мы сделаем элементы label в виде кнопок, давая им некоторые стили градиента. Несколько теней, тонкие границы и эффекты. Мы также установить z-index до 20, чтобы убедиться, что он будет наверху:

При наведении, мы сделаем этикетки label белого цвета:

Когда мы нажимаем label, чекбокс будет активирован и когда это произойдет, мы хотим, чтобы для label были применены следующие стили:

Давайте добавим значок со стрелкой вниз, при наведении курсора мыши. Для этого мы просто будем использовать псевдо-класс :after, так что мы не добавляем ненужного кода:

При активации, мы хотим чтобы показывалась стрелка вверх, поэтому:

И так как мы не хотим показать элементы input, мы спрячем их:

Контент блоков будет иметь начальную высоту 0px. Мы добавим переход высоты и некоторую тени. Переход, который мы добавляем здесь, будет действовать при закрытии блока. Определим еще один переход для выбранного элемента. Таким образом, можно контролировать в основном два поведения. Также, мы сделаем закрытие блока немного быстрее, чем открытие.

Добавим некоторые стили для контента внутри блоков:

Теперь определим три класса разной высоты. Эта высота будет в виде анимации:

Как уже упоминалось, автоматическое регулирование высоты, конечно, лучший вариант, но поскольку мы не можем применить это в данном случае, мы должны установить несколько переход значений высоты.

Пожалуйста, обратите внимание, что в некоторых мобильных браузеров, это может не работать.

Заключение

Итак, мы имеем следующее:

Вот и финиш! Надеюсь, вам понравился и был полезен этот урок!

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

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

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

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

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

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

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

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

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

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

HTML

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

CSS

.accordMenu h2 + 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 h2 + div{
      height: 100px;
}
h2 a, h2{
      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. Для так называемого «костыля» для нашего дедушки подойдет множество средств, все зависит от Вашего энтузиазма и фантазии. В указанном примере костыль не используется.

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

В каких браузерах работает?

Подводя итог

Использование верстки меню нетипичными способами на основе CSS позволяет эргономично организовать контент Вашего интернет-ресурса.

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

Оценок: 7 (средняя 4.4 из 5)

• 1787 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное