аккордеон меню многоуровневое меню
Многоуровневое аккордеон-меню
Простое аккордеон-меню средствами CSS.
Данный пример разработан исключительно средствами CSS, а именно гвоздём программы стал псевдо-класс :checked. Так же мы добавили и версию с применением jQuery в случае если вы захотите каких-то анимационных эффектов.
Структура
Добавляем стиль
Для отслеживания выборки элемента мы используем специальную технику: используя элемент checkbox, мы сможем воспользоваться псевдо-классом :checked и сменить отображение потомков с “none” на “block”.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/css-multi-level-accordion-menu/
Перевел: Станислав Протасевич
Урок создан: 28 Октября 2015
Просмотров: 34826
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Как создать вертикальный аккордеон для сайта
Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).
Процесс создания аккордеона
Процесс разработки вертикального аккордеона будет состоять из:
Дизайн аккордеона (скриншот):
HTML код аккордеона и его описание
Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).
Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).
CSS код аккордеона
JavaScript код аккордеона
Сценарий (логика) аккордеона:
Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).
Инициализация элемента как аккордеон выполняется следующим образом:
Аккордеон, заголовки которого отделены друг от друга
Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:
CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):
Аккордеон с анимацией появления
Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:
Стили аккордеона, включающие в себя анимацию (для отображения содержимого):
Вертикальное меню аккордеон
Пример настройки аккордеона в качестве вертикального меню.
Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.
Многоуровневое вертикальное меню аккордеон
Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.
HTML, CSS и JavaScript код многоуровневого меню:
Комментарии:
Александр, доброго времени суток!
Снова нужна ваша помощь. ) В процессе работы представленного меню возникла след. проблема.
Когда впервые заходишь на сайт пункты меню не нажимаются и ни каким образом не раскрываются. Если я обновляю страницу, то все начинает работать как надо (начинают раскрываться пункты). Происходит не каждый раз, а через раз… Помогите пожалуйста победить эту проблему!) Вот сам сайт, где происходит этот баг.
Привет!
Размеры, которые мы устанавливаем в CSS являются виртуальными, не зависящимися от экрана. Например, 1px в CSS может занимать как один физический пиксель, так и четыре (на Retina дисплеях). Физический пиксель — это самый мелкий элемент дисплея.
Когда изменяешь масштаб в браузере, например, устанавливаешь его на 90%, то 1 пиксель в CSS должен как-то отобразиться на экране. Он же не может занять часть физического пикселя. Браузер это процесс рассчитывает и получается, что в одних местах он занимает 1 физический пиксель, а в других ничего.
Как вариант, это установить больший размер:
Как сделать многоуровневое меню-аккордион на CSS3.
Всем привет! В этой статье мы рассмотрим, как сделать простое многоуровневое меню-аккордион на CSS3.
Создание структуры
Структура очень простая: аккордион – это ненумерованный список. Если элемент списка содержит другие элементы, тогда мы вставляем input[type=checkbox] и его метку. Также мы добавляем .has-children класс к элементу списка. Все «обычные» элементы списка содержат только ссылку.
Добавляем стили
Мы используем умную(и достаточно стандартную в наши дни) технику определения клика и показываем подсодержание с использованием только CSS: для checkbox элемента мы можем использовать псевдо-класс :checked и смежный селектор(div + div), чтобы изменить свойство display для ul с none на block.
Шаг за шагом: прежде всего, мы должны убедиться, что checkbox охватывает весь элемент списка, который содержит подсодержание. Другими словами, мы должны создать кастомный checkbox. Итак, для начала вы должны проверить, когда кликаете по метке, выбран checkbox или нет. Этого можно достичь, используя for аттрибут внутри элемента метки. Таким образом вы можете просто скрыть input элемент и работать вместо него с меткой.
Заметьте, что сейчас в html разметке input, метка и ненумерованный лист являются родственными элементами. Используя псевдокласс :checked, вы можете анимировать данный процесс: когда checkbox выбран(кликнули по метке), тогда свойство display для элемента ul меняется с none на block.
.cd-accordion-menu ul <
/* by default hide all sub menus */
display: none;
>
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul <
/* use label:nth-of-type(n) to fix a bug on safari (
Если вы хотите сделать плавную анимацию, тогда подключите js файл. Также не забудьте добавить .animate класс к .cd-accordion-menu элементу(это анимирует стрелочки).
Итак, на этом все. Спасибо за внимание!
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 1 ):
Подскажи пожалуйста, почему когда я делаю фон сайта градиентом, он у меня разбивает весь градиент на полосы?
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Многоуровневый аккордеон
Плагин JQuery для создания аккордеона
На примере этого аккордеона сделана эта заметка.
Установка:
Добавляем на сайт библиотеку jQuery, CSS и JS файлы
class = «accordion-header default-open» > Заголовок 1
class = «f20 accordion-header» > Заголовок 1.1
class = «f20 accordion-header» > Заголовок 1.2
class = «f20 accordion-header» > Заголовок 1.3
class = «accordion-header default-open» > Заголовок 2
Атрибут data-multiple определяет открытые вкладки (только одна или все)
И подключаем скрипт:
Настройки:
Смотрите также:
Фиксированное гамбургер-меню
Фиксированное гамбургер-меню на jQuery с анимированным появлением его элементов
Выдвижная боковая панель на CSS
Пример создания выдвижной боковой панели средствами CSS
Навигационное меню для лендинга
Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции
Добавить комментарий:
Комментарии:
О почему анимация такая дерганная. Сначала чуть приоткрывает, а потом открывает доконца. Как сделать просто плавное раскрытие?
У меня он не притормаживает, но примерно понимаю о чем вы.
Эти все эффекты скорее зависят от нагрузки компа или браузера.
И соответственно от того что анатомируется.
Развернуть 10 строчек — одно, а менять так страницы сайта — тут можно зависнуть просто и вообще ничего не откроется.
Он не поттармаживает, видно, что это анимацией делается. Комп у меня совсем зверь, на нем ничего не подтормаживает. Большой похоже на плавность анимации, типа дельта по умолчанию какая то экзотическая
Попробуйте вместо margin использовать padding
Проблему решил, виноватым было свойство *
Проблемы давно решил. Дергалось из-за глобального свойства transition. Было прописано через звездочку для всех элементов.
Ну тут пример не помешал бы. Какая то ошибка…
Друзья, всем привет.
Не получается в одной вкладке сделать несколько блоков с классом
А accordion-header не забываете?
Можете попробывать в вакууме на codepen
Спасибо за отличный аккордеон, мне кажется что для людей которые не особо понимают что и как делается и копипастят бездумно следует добавить что :
-подключаем сначала jQuerry
-копируем JS код в [*].js
-подключаем [*].js внизу страницы
-в [*].js после добавления кода аккордеона не забываем его включить строчками
Почему у меня не работает? =\ создаю файл html, css и js с помощью бутстрап. после этого запускаю браузер, нажимаю меню и она не открывается. Что не так? посмотрел консоль не было ошибок.
Дайте ссылку.
Кстати у бутстрапа есть свой аккордеон же
на счет бутстрапа.. Да свой, но вот только тяжело писать код для многоуровненвый и путаниц. А у вас покороче и понятнее, чем бутстрап.
Чтобы полечить ее, замените $ на jQuery
Автозаменой все $ на jQuery
Код из //setting.js поместите в:
А то что у вас ниже
Это лишнее, аккордион у вас подключается в setting с настройками.
Увы, не работает. Ладно, буду время — дольше изучу. А так спасибо за все;)
Спасибо дружище! И спасибо за твои посты! Ты супер!
Меню и аккордеоны
Горизонтальные и вертикальные меню, а также аккордеоны для сайта
Анимированный переход между пунктами меню
Три примера плавных анимированных переходов между пунктами меню на jQuery
Данное меню можно использовать для лендингов, переключения вкладок, открытия модальных окон или других переходов внутри страницы.
Для их реализации использована библиотека jQuery
Навигационное меню для лендинга
Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции
Меню реализовано с использованием библиотеки jQuery
Модальное окно для контактов
Модальное окно для контактов или социальных сетей с фиксированной кнопкой
В меню контактов используются иконки шрифта FontAwesom 4.7
Вертикальный аккордеон для фотографий
Вертикальный аккордеон с раскрывающимися по клику фотографиями
Для реализации этого аккордеона, который на малых экранах переходит в табы, используется небольшой код на JavaScript.
Боковое меню с иконками на CSS
Фиксированное боковое меню с иконками и выдвигающимися подсказками на CSS
Иконки в данном меню могут иметь любые форматы (графика или шрифт).
Для SVG-иконок предусмотрен вариант с анимацией (пункт 3 в меню).