Веб-дизайнеру
Веб-разработчику
Дополнительно
Меню аккордеон CSS, современный дизайн + 3 варианта!
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы будем создавать меню аккордеон css, с помощью псевдо-класса :checked. Используя скрытые input и label, мы создадим меню в виде аккордеона, которое будет открываться и закрываться. Также советую посмотреть статью “Современное CSS3 меню + мобильная версия!”.
Есть много способов создания CSS-аккордеона, большинство из которых реализуются с помощью псевдо-класса :target. Проблема использования этого метода состоит в том, что мы не можем иметь несколько открытых разделов одновременно. Используя скрытые чекбоксы, мы можем контролировать открытие и закрытие. Кроме того, мы можем также использовать радио-кнопки, если мы хотим чтобы была открыта только одна область одновременно.
Итак, давайте начинать!
HTML разметка
В исходниках присутствует 3 варианта меню, но мы рассмотрим те, который использует чекбоксы, где содержание одного из разделов открывается по умолчанию. Все они будут обернуты в обертку с классом ac-container. Для каждого элемента, мы имеем чекбокс, label и текст, который и является содержанием раздела:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">About us</label> <article class="ac-small"> <p>Some content... </p> </article> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox" checked /> <label for="ac-2">How we work</label> <article class="ac-medium"> <p>Some content... </p> </article> </div> <div><!--...--></div> </section> |
Обратите внимание, что мы должны дать каждому элементу input ID, который мы будем далее использовать. Нам нужно это для того, чтобы провести проверку чекбокса при нажатии на label.
Каждая статья имеет класс, который поможет нам определить, до какой высоты можно его расширинить (оптимально, конечно использовать “auto“, как значение высоты, но, к сожалению, в данном случае это не работает).
Давайте посмотрим на стили CSS.
Стилизация CSS
Давайте определим ширину для меню аккордеона и отцентрируем его:
|
1 2 3 4 |
.ac-container{ width: 400px; margin: 10px auto 30px auto; } |
Далее, мы сделаем элементы label в виде кнопок, давая им некоторые стили градиента. Несколько теней, тонкие границы и эффекты. Мы также установить z-index до 20, чтобы убедиться, что он будет наверху:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.ac-container label{ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; padding: 5px 20px; position: relative; z-index: 20; display: block; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); line-height: 33px; font-size: 19px; background: linear-gradient(top, #ffffff 1%,#eaeaea 100%); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1); } |
При наведении, мы сделаем этикетки label белого цвета:
|
1 2 3 |
.ac-container label:hover{ background: #fff; } |
Когда мы нажимаем label, чекбокс будет активирован и когда это произойдет, мы хотим, чтобы для label были применены следующие стили:
|
1 2 3 4 5 6 7 8 9 |
.ac-container input:checked + label, .ac-container input:checked + label:hover{ background: #c6e1ec; color: #3d7489; text-shadow: 0px 1px 1px rgba(255,255,255, 0.6); box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1); } |
Давайте добавим значок со стрелкой вниз, при наведении курсора мыши. Для этого мы просто будем использовать псевдо-класс :after, так что мы не добавляем ненужного кода:
|
1 2 3 4 5 6 7 8 9 10 |
.ac-container label:hover:after, .ac-container input:checked + label:hover:after{ content: ''; position: absolute; width: 24px; height: 24px; right: 13px; top: 7px; background: transparent url(../images/arrow_down.png) no-repeat center center; } |
При активации, мы хотим чтобы показывалась стрелка вверх, поэтому:
|
1 2 3 |
.ac-container input:checked + label:hover:after{ background-image: url(../images/arrow_up.png); } |
И так как мы не хотим показать элементы input, мы спрячем их:
|
1 2 3 |
.ac-container input{ display: none; } |
Контент блоков будет иметь начальную высоту 0px. Мы добавим переход высоты и некоторую тени. Переход, который мы добавляем здесь, будет действовать при закрытии блока. Определим еще один переход для выбранного элемента. Таким образом, можно контролировать в основном два поведения. Также, мы сделаем закрытие блока немного быстрее, чем открытие.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.ac-container article{ background: rgba(255, 255, 255, 0.5); margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; transition: height 0.3s ease-in-out, box-shadow 0.6s linear; } .ac-container input:checked ~ article{ transition: height 0.5s ease-in-out, box-shadow 0.1s linear; box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); } |
Добавим некоторые стили для контента внутри блоков:
|
1 2 3 4 5 6 7 8 |
.ac-container article p{ font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; text-shadow: 1px 1px 1px rgba(255,255,255,0.8); } |
Теперь определим три класса разной высоты. Эта высота будет в виде анимации:
|
1 2 3 4 5 6 7 8 9 |
.ac-container input:checked ~ article.ac-small{ height: 140px; } .ac-container input:checked ~ article.ac-medium{ height: 180px; } .ac-container input:checked ~ article.ac-large{ height: 230px; } |
Как уже упоминалось, автоматическое регулирование высоты, конечно, лучший вариант, но поскольку мы не можем применить это в данном случае, мы должны установить несколько переход значений высоты.
Пожалуйста, обратите внимание, что в некоторых мобильных браузеров, это может не работать.
Заключение
Итак, мы имеем следующее:
Вот и финиш! Надеюсь, вам понравился и был полезен этот урок!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
Доброй ночи.
Попробовал ваш пример. Очень красиво получилось, да вот есть проблема:
как сделать так, чтобы при обновлении страницы, меню не сворачивалось, а запоминало где было открыто.
/
Здравствуйте! Извините за столь поздний ответ, но к сожалению я не смогу вам помочь так как не владею такой информацией (мой уровень знаний в данной области не достаточно высок). Могу только посоветовать обратиться к хорошим специалистам, который могут помочь Вам.
Здравствуйте! Замечательный пример, очень понравился. К сожалению не в JQUERY не бум-бум, несколько раз просмотрел код, но так и не смог найти, какой там элемент отвечает за скорость раскрывания и сворачивания блоков, подскажите пожалуйста, буду очень признателен.