Аккордеон при наведении css

Аккордеон на CSS

Вариант создания аккордеона на чистом CSS

2 примера создания аккордеона без использования скриптов.

Один работает с использованием радиокнопок , а другой с флажками

Пример аккордеона с одной открытой вкладкой

Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже

Еще описание вкладки

И еще описание вкладки

Обратите внимание, что ID для каждой вкладки должны быть уникальные:

Пример аккордеона с несколькими открытыми вкладками

Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки на флажки

Еще описание вкладки

И еще описание вкладки

CSS такой же, как в первом варианте

• Опубликовано: 20.10.2020 / Обновлено: 04.02.2021
• Рубрики: Меню и аккордеоны
• Метки: CSS
• 6045 просмотров

Смотрите также:

Многоуровневый аккордеон

Плагин JQuery для создания аккордеона

Блочное меню со сменой фона

Меню на графическом фоне, который меняется при выборе каждого пункта

Оформление хлебных крошек

5 вариантов оформления хлебных крошек

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

Комментарии:

Здравствуйте. Спасибо за знания. У меня вопрос, не совсем к вашему коду, но .. близко. У меня используется что-то типа аккордеона, где при открытии каждой вкладке происходит подгрузка содержимого именно этой вкладки. Тип содержимого вкладок одинаково, отличия лишь в конкретных данных числах, названиях и т.д. Проблема собственно в следующем — при открытии страницы с аккордеоном-вкладками открывается первая вкладка со своими данными, тут всё ок, но если открыть следующую вкладку то первые секунд 5-ть. (иногда дольше) то в новой вкладке отображается содержимое первой кладке. Потом происходит обновление содержимого кладки до актуального содержимого. Как бороться? Может как-то скрывать содержимое вкладки(ок) до окончательной загрузки содержимого или svg-шку загрузки показывать? Буду весьма признателен за ссылку на пример.

Без примера сложно что то сказать.
Видеть надо как это работает.

Вот кусок из функции loadedCatasi (в неё вытаскивается массив данных (по вкладкам) из бд)

Мне эта информация вообще ни о чем не говорит…
Напишите мне в ВК или телеграм, нужно на сайте видеть что и как работает.

ЗЫ: эту тему удалю завтра, т.к. она не имеет вообще ничего общего с темой заметки

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

Дополнение: если текста больше чем на страницу.

bbobik………………, нормальный БАЯН — зря грешишь, всё работает в нормуль — ручки только нужны с головой, что бы для себя сие подделать!

Источник

Аккордеон меню

Аккордеон представляет собой список с раскрывающимся содержимым (рис. 1). Удобен для создания больших меню из-за компактности, а также для блоков вопросов и ответов. Название произошло от музыкального инструмента, который напоминает своим видом.

Рис. 1. Вид аккордеона

Есть два типа аккордеон-меню.

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

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

Пример 1. Код отдельного пункта аккордеона

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

Алгоритм создания аккордеона повторяет шаги при создании вкладок. Сперва мы прячем и содержимое через свойство display со значением none .

Затем с помощью псевдокласса :checked показываем содержимое, задавая свойству display значение block .

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

Чтобы пользователь понимал, что на пункты списка можно щёлкать, изменим вид курсора на «руку» при наведении на заголовок.

В примере 2 показан набор вопросов и ответов в виде аккордеона. В свёрнутом состоянии всё это выглядит компактно, каждый вопрос можно разворачивать и сворачивать.

Пример 2. Создание аккордеона

Под HTML5 обычно подразумевают два разных понятия:

• Это язык разметки документа, пришедший на смену HTML4 и XHTML.
• Это набор веб-технологий, позволяющий делать на сайте всякие интересные штуки.

Источник

Аккордеон при наведении css

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Анимация фона при прокрутке страницы

Анимируем SVG фигуры при прокрутке страницы.

Пример 3D помещения выставки

Экспериментальная 3D проекция помещения галереи.

Источник

Создаем аккордеон с использованием только CSS

В данном уроке мы разберемся, как создать такой популярный элемент дизайна веб страниц как аккордеон с использованием только HTML и CSS (будет добавлено немного CSS3 для организации перехода между слайдами). В итоге мы получим код для двух вариантов аккордеона — горизонтального и вертикального.

Горизонтальный аккордеон

Начнем с разметки для горизонтального аккордеона. Она не содержит ничего специфического, только обычный код HTML:

Мы используем простой неупорядоченный список, который содержит несколько элементов с классами. Все просто. А CSS код превращает разметку в то, что нам нужно:

Все достаточно просто и очевидно. Сначала мы определяем класс .accordion для элемента

, где задается ширина и скрытие выступающего за рамки элемента контента, а также некоторые другие правила для стилизации внешнего вида.

Затем мы смещаем пункты списка влево, задаем для них ширину 20% (100% ÷ 5 = 20%) и устанавливаем свойство overflow:hidden; , чтобы ничего не выступало за рамки элемента. Также устанавливается фиксированная высота, которая отлично подходит для размещения контента при разворачивании пункта списка.

Для динамического эффекта при разворачивании пункта списка мы устанавливаем время перехода 0.2 секунды и эффект плавного перехода.

Затем используются очень полезные селекторы :first- и :last-of-type для задания скругленных углов слева вверху и внизу для первого пункта списка и справа вверху и внизу для последнего пункта списка соответственно.

Затем мы устанавливаем отступ в 10 px для элемента

Теперь мы устанавливаем функционал аккордеона:

Данное правило утверждает следующее: как только курсор мыши окажется над элементом

, нужно сделать все элементы
шириной 10%.

Таким образом, мы получим 5 × 10% = 50%. 5 слайдов шириной 10% в списке. То есть у нас есть 50% свободного пространства для того, чтобы заполнить его пунктом списка, над которым находится курсор мыши.

10% пункта списка + 50% свободного пространства = 60%

Теперь мы просто устанавливаем правило: пункт списка, над которым находится курсор мыши, надо сделать шириной 60%:

В целом функционал использует два правила и расшифровывается так: когда курсор мыши находится над списком, нужно установить ширину всех пунктов списка равной 10% ширины элемента

, но тот элемент, над которым находится курсор мыши, надо сделать шириной 60%.

10% + 10% + 10% + 10% + 60% = 100%

Последний блок кода просто устанавливает цвета для наших слайдов.

Когда весь код соединяется вместе, мы получаем серию пунктов списка, которые изменяют свою ширину при наведении на них курсора мыши (но всегда общая ширина равна 100%). Мы используем немного CSS3 для создания скругленных углов и эффекта перехода в тех браузерах, которые поддерживают данные правила. Таким образом, мы получили аккордеон, который не использует JavaScript и работает даже в IE7.

Вертикальный аккордеон

Теперь разберемся с вертикальным аккордеоном. Для него мы будем использовать идентичную разметку HTML с единственным добавлением ID для элемента

:

Теперь мы пристыковываем пункты списка друг к другу по вертикали. Устанавливаем для них ширину 100% и используем логику 10% / 60% для задания высоты. Код CSS имеет следующий вид:

Мы явно устанавливаем ширину равной 100% в правиле для селектора :hover , но логика для расчета значений высоты не изменилась.

Готово!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: csswizardry.com/2011/02/pure-css3-accordion/
Перевел: Сергей Фастунов
Урок создан: 4 Марта 2011
Просмотров: 42176
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

Accordion меню на чистом CSS

Доброго времени суток уважаемые хабражители. На сегодняшний день большинство техник создания меню-гармошки включают в себя использование псевдо-класса :target . Проблема использования :target заключается в невозможности закрыть какой либо блок в нашем меню, работать будет только «рыскрытие» гармошки.

Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)

Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked . С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox и radio соответственно.

HTML разметка

Само меню будет находиться в с классом ac-container . Внутри каждого раздела разместим checkbox и , который будет привязан к input по соответствующему ID.

CSS стили

Укажем ширину основного блока и размести его по центру страницы

При нажатом input добавим стиль для соотвествующего выделенного

С помощью псевдо-класса :after добавим иконки стрелочек вверх и вниз для label при наведении

Прячем input и стилизуем article:

Обидно только, что для article необходимо указывать фиксированную высоту. Если параметр height будет auto то анимация не будет работать.

Источник

Читайте также:  Ноты пресняков ты скажи