меню аккордеон для битрикс

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

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

С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.

К сожалению, у дефолтного маркера есть два недостатка:

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Svg маркер + анимация поворота:

Summary:before пришлось серьезно переделать:

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.
Для summary поставить padding-right: 1.5em;

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Svg маркер справа + эффект зеркального поворота стрелки:

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

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

Таблица поддержки Details/Summary браузерами.

С вами был разработчик конструктора лэндингов cPortfolio!

Источник

Как создать вертикальный аккордеон для сайта

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием 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 физический пиксель, а в других ничего.

Как вариант, это установить больший размер:

Источник

Вертикальное меню CSS в стиле аккордеон

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

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

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

Рассмотрим изображение в рабочем состояние и также по умолчанию.

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

А так будет реально по стилю смотреться, где заменены кнопки с оттенком цвета.

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

.mobiladam <
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

Если рассматривать сам конструктор, то здесь структура HTML довольно проста, где аккордеон считается как неупорядоченный список. Где все понятно распределено, что вам останется поставить свои знаки, где при видя значка можно изначально понять, что это за раздел и под какое тематическое направление относится.

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Модальное окно для контактов

Модальное окно для контактов или социальных сетей с фиксированной кнопкой

Анимированный переход между пунктами меню

Три примера плавных анимированных переходов между пунктами меню на jQuery

Полноэкранное мобильное меню

Полноэкранное мобильное меню с фиксированной иконкой-гамбургер

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

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

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

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

Та же проблема, что только не делал — скроллит в конец страницы, плюнул и сделал на jquery из другого примера

Источник

Вертикальное меню аккордеон в 5 версиях

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

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

Сам стиль аккордеона изначально создает полноценный дизайн, где можете использовать его для самых разных целей, как меню для сайта, записей, изображений, фрагментов статей, фрагментов текста и даже записей. Большинство аккордеонов зависят от JavaScript, в основном от jQuery, но поскольку использование передовых процедур CSS3 стало далеко идущим, мы также можем найти приятные модели, которые используют HTML и CSS в одиночку, где делают их доступными в ситуациях с JavaScript с ограниченными возможностями.

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

GSAP Вертикальное Аккордеонное Меню

Этот пример является примером вертикального аккордеона, в котором используется самый последний код CSS3 и JS а также JavaScript. Вы можете наблюдать плавные и отзывчивые воздействия активности.

.accordion <
display: block;
width: 412px;
overflow: hidden;
margin: 0 auto;
background: white;
border-radius: 4px;
position: relative;
box-shadow: 0 2px rgba(0, 0, 0, 0.12);
>
.panel <
display: block;
background: white;
position:relative;
overflow: hidden;
color: #b5abab;
margin: 0 auto;
>
.panel-header <
line-height: 56px;
background: white;
cursor: pointer;
text-indent:15px;
border-bottom: 1px solid #e4e4e4;
>

.spacer <
height: 3px;
position: absolute;
width: 0;
display: block;
top: 54px;
background: #38B087;
>

.panel-content <
background: rgba(92, 127, 94, 0.72);
position: relative;
border-top: 0px solid rgba(0, 0, 0, 0.12);
height: 0;
>
.item <
display: block;
width:100%;
cursor: pointer;
padding: 15px 0;
text-decoration:none;
color:white;
text-indent:25px;
border-bottom:1px solid rgba(0, 0, 0, 0.06);
>
.item:hover <
background-color: rgba(0, 0, 0, 0.06);
>
.panel i <
text-indent:0; padding-right: 6px;
>
.panel span i <
padding-right: 0;
>
.arrow <
text-indent:0;
line-height: 56px;
float: right;
position: relative;
right: 16px;
font-weight: bold;
>

/* ===== Variables ===== */
var header = document.querySelectorAll(«.panel-header»),
item = document.querySelectorAll(«.item»),
hoverPanelTl = [],
openedPanel = <>;

Array.prototype.forEach.call(header, function (el, i) <
var arrow = el.querySelector(«.arrow»),
spacer = el.querySelector(«.spacer»),
panel = el.parentNode,
content = panel.querySelector(«.panel-content»);

hoverPanelTl[i] = new TimelineLite();

/* ============= Define hover animation ============= */
hoverPanelTl[i].to(el, 0.2, <
css: <
color: «#4f7351»,
background: «rgba(203, 228, 205, 0.6)»,
textIndent: «25px»
>,
ease: Linear.easeNone
>);

el.addEventListener(«click», function () <
/* ============= If panel open ============= */
if (!panel.classList.contains(«closed»)) <
hoverPanelTl[i].paused(false);
TweenLite.set(spacer, );
TweenLite.to(content, 0.3, );
TweenMax.to(arrow, 0.3, );
panel.classList.add(«closed»);
openedPanel = <>;
> else <

TweenLite.to(openContent, 0.3, );
TweenMax.to(openArrow, 0.3, <
rotation: 0,
transformOrigin: «25% 50%»
>);
openPanel.classList.add(«closed»);
>

/* ============= If panel closed ============= */
hoverPanelTl[i].paused(true);
TweenLite.set(spacer, );
TweenLite.set(content, );
TweenLite.from(content, 0.5, <
height: 0,
borderTopWidth: 0,
ease: Back.easeOut.config(1.4)
>);
TweenMax.to(arrow, 0.5, <
rotation: 90,
transformOrigin: «25% 50%»,
ease: Back.easeOut.config(1.4)
>);
panel.classList.remove(«closed»);
openedPanel.el = el;
openedPanel.hoverTl = i;
>
>);
>);

Array.prototype.forEach.call(item, function (el, i) <
el.addEventListener(«click», function () <
console.log(«The » + el.innerText + » button was clicked.»);
>);
>);

Для первой навигаций Accordion меню установка завершена.

Удивительное аккордеонное меню на CSS3

Установочный процесс завершен.

Аккордеонное меню на чистом CSS

.item <
/* border-top: 1px solid royalblue; */
overflow: hidden;
>

.btn i <
margin-right: 16px;
>

.sm-menu a:hover::before <
opacity: 1;
>

.sm-menu a::before <
content: «»;
position: absolute;
top: 50%;
right: 5px;
width: 6px;
height: 6px;

@media only screen and (max-width:500px) <
.wrapper <
width: 50%;
>
.sm-menu a::before <
display:none;
>

Установка меню завершена.

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

На этом установочный процесс закончен.

Навигация на аккордеонное меню с помощью CSS3

nav <
width:400px;
height:auto;
font-family:’Open Sans’,sans-serif ;
margin: 100px auto;
overflow:hidden;
>

.item input <
display:none;
>
.item label <
display:block;
padding:10px;
background-color:#434343;
font-size:20px;
color:#fff;
cursor:pointer;
border-bottom:solid 2px #aaa;
>

.item label span <
padding-left:240px;
transform:rotateX(45deg);
>
.item label:hover <
background-color:#f2673a;
>

.item ul li a:hover <
background-color:#9CF;
>

Все, здесь нет шрифтовых кнопок, только навигационный эффект аккардеона.

Надеюсь, что эта статья с материалом может предложить решение для веб-разработчиков, которым необходимо создавать относительно простые виджеты в стиле аккордеона.

Источник