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

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

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

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

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

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

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

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

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

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

>
.uduvekon <
width:396px;
border-radius:8px;
overflow:hidden;
>
.item <
border-top: 1px solid #5392bb;
overflow: hidden;
>
.navigatsiya <
display: block;
padding: 16px 20px;
background: #2071a7;
color: #f1f0f0;
position: relative;
text-shadow: 0 1px 0 #5d5757;
>
.navigatsiya:before <
content: «»;
position: absolute;
width: 14px;
height: 14px;
background: #2a73a5;
left: 18px;
bottom: -7px;
transform: rotate(45deg);
>
.navigatsiya i <
margin-right:10px;
>
.menyu-akkordeon <
background:#2f2f2f;
overflow:hidden;
transition: max-height 0.3s;
max-height:0;
>
.menyu-akkordeon a <
display:block;
padding: 16px 20px;
color: #f5f4f4;
font-size:14px;
margin: 4px 0 ;
position:relative;
>
.menyu-akkordeon a:before <
content: «»;
position: absolute;
width: 5px;
height: 100%;
background: #1fc6d0;
left: 0;
top: 0;
transition: 0.3s;
opacity: 0;
>
.menyu-akkordeon a:hover:before <
opacity:1;
>
.item:target .menyu-akkordeon <
max-height:10em;
>

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

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

Источник

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

Искал. Нашел вариант, но не получается.

Создал доп. меню .left_****.php, привязывал его к основному меню .left.menu.php
уравень вложенности меню: 2
из всех папок, где содержался файл «.left.menu.php» удалял, туда заливал .left_****.php.
.left.menu.php лежит в корне.

Итог: Меню совмещается из двух файлов.

ГЛАВНАЯ
ОБЩИЕ СВЕДЕНИЯ
ИСТОРИЯ
СОВЕТ
КОНТАКТЫ
ОФИЦИАЛЬНО
и т.д.

*** — второе меню, видно постоянно.

Ну, может, вы всё же сформулируете вопрос?

Как для тупых: я хотел получить то-то, сделал так-то, а в результате поимел ва-а-аще-не-то!

Пример чего я хочу получить вот, т.е. кликнув на Пункт в меню, меню раздвигается и видны разделы этого пункта.

у меня не получается сделать это так, как на картинке.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

Процесс разработки вертикального аккордеона будет состоять из:

• создания HTML разметки;
• описания его внешнего вида с помощью CSS;
• написания логики на JavaScript.

Дизайн аккордеона (скриншот):

HTML код аккордеона и его описание

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show . Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

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

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content , т.е. содержимого .

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none ). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show , который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):

Аккордеон с анимацией появления

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

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

Пример настройки аккордеона в качестве вертикального меню.

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

CSS и JavaScript:

Многоуровневое вертикальное меню аккордеон

Пример в котором рассмотрим как создать многоуровневое вертикальное меню аккордеон.

HTML, CSS и JavaScript код многоуровневого меню:

Источник

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

Искал. Нашел вариант, но не получается.

Создал доп. меню .left_****.php, привязывал его к основному меню .left.menu.php
уравень вложенности меню: 2
из всех папок, где содержался файл «.left.menu.php» удалял, туда заливал .left_****.php.
.left.menu.php лежит в корне.

Итог: Меню совмещается из двух файлов.

ГЛАВНАЯ
ОБЩИЕ СВЕДЕНИЯ
ИСТОРИЯ
СОВЕТ
КОНТАКТЫ
ОФИЦИАЛЬНО
и т.д.

*** — второе меню, видно постоянно.

Ну, может, вы всё же сформулируете вопрос?

Как для тупых: я хотел получить то-то, сделал так-то, а в результате поимел ва-а-аще-не-то!

Пример чего я хочу получить вот, т.е. кликнув на Пункт в меню, меню раздвигается и видны разделы этого пункта.

у меня не получается сделать это так, как на картинке.

Источник