Меню аккордеон CSS, современный дизайн + 3 варианта! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSМеню аккордеон CSS, современный дизайн + 3 варианта!
Дата: 30.05.2013 в 20:44 | Просмотров: 12139

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

меню аккордеон CSS
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы будем создавать меню аккордеон 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. Мы добавим переход высоты и некоторую тени. Переход, который мы добавляем здесь, будет действовать при закрытии блока. Определим еще один переход для выбранного элемента. Таким образом, можно контролировать в основном два поведения. Также, мы сделаем закрытие блока немного быстрее, чем открытие.

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

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

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

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

Заключение

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

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


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Сергей:

      Доброй ночи.
      Попробовал ваш пример. Очень красиво получилось, да вот есть проблема:
      как сделать так, чтобы при обновлении страницы, меню не сворачивалось, а запоминало где было открыто.

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! Извините за столь поздний ответ, но к сожалению я не смогу вам помочь так как не владею такой информацией (мой уровень знаний в данной области не достаточно высок). Могу только посоветовать обратиться к хорошим специалистам, который могут помочь Вам.

    1. Здравствуйте! Замечательный пример, очень понравился. К сожалению не в JQUERY не бум-бум, несколько раз просмотрел код, но так и не смог найти, какой там элемент отвечает за скорость раскрывания и сворачивания блоков, подскажите пожалуйста, буду очень признателен.

Добавить комментарий