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


Содержание материала:

JQuery плагин вертикального аккордеон меню для блога WordPress

Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu W >

Плагин

Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.

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

Ну а теперь давайте перейдём к процессу установки и настройки плагина.

Установка плагина

Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.

Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.

На рисунке выше я подчеркнул название самого виджета.

После Вам всего лишь понадобится перетащить его в сайдбар, который находится сплава, в нужно Вам место.

Настройки плагина

После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.

Важный момент: рубрики и подрубрики.

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

Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.

Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.

Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.

После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.

Надеюсь, что всё ясно и доступно объяснил. Если Вам всё таки Вам будет что то не понятно спрашивайте в комментариях. До скорых встреч, друзья.

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

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

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

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

Так можно увидеть при входе на сайт или страницу.

Открываем категорию и там уже прописаны все запросы для быстрого поиска.

Приступаем к установке:

a <
text-decoration: none;
>

h2 <
text-align: center;
margin: 20px auto;
color: #fff;
>

.generatio-nmemory <
width: 100%;
max-width: 371px;
margin: 57px auto 18px;
background: #ece9e9;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
>

.generatio-nmemory li.open .begunamas-production <
color: #177512;
font-weight: bold;
>

.generatio-nmemory li.open + li <
border-top: 1px solid #b3aaaa;
>

Топ-пост этого месяца:  15 Лучших инструментов для технического аудита сайта

/* поворот наоботот */
.generatio-nmemory li:not(.open) .begunamas-production .fa-chevron-down <
-moz-transform: rotate(90deg); /* Для Firefox */
-ms-transform: rotate(90deg); /* Для IE */
-webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */
-o-transform: rotate(90deg); /* Для Opera */
transform: rotate(270deg);
>

.generatio-nmemory li.open .begunamas-production <
border-bottom: 1px dashed #b3aaaa;
>

.begunamas-production <
cursor: pointer;
display: block;
padding: 14px 14px 14px 37px;
font-size: 18px;
border-bottom: 1px solid #b3aaaa;
color: #274052;
position: relative;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
font-weight: bold;
>

.begunamas-production i <
position: absolute;
top: 15px;
left: 15px;
>
.begunamas-production .fa-chevron-down <
right: 12px;
left: auto;
>

.developers-accidentaly <
display: none;
background: #bad4dc;
>

.developers-accidentaly a <
display: block;
color: #545151;
padding: 10px 10px 10px 38px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background-color: #caf4fb;
font-weight: bold;
font-size: 14px;
>
.developers-accidentaly:hover <
color: #b5e6ef;
>

.developers-accidentaly a:hover <
color: #691401;
text-decoration: underline;
>

$(function() <
var Accordion = function(el, multiple) <
this.el = el || <>;
// more then one submenu open?
this.multiple = multiple || false;

var dropdownlink = this.el.find(‘.begunamas-production’);
dropdownlink.on(‘click’,
< el: this.el, multiple: this.multiple >,
this.dropdown);
>;

Accordion.prototype.dropdown = function(e) <
var $el = e.data.el,
$this = $(this),
//this is the ul.submenuItems
$next = $this.next();

if(!e.data.multiple) <
//show only one menu at the same time
$el.find(‘.developers-accidentaly’).not($next).slideUp().parent().removeClass(‘open’);
>
>

var accordion = new Accordion($(‘.generatio-nmemory’), false);
>)

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

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

Hello-site.ru

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

И снова рубрика «зачем плагины, библиотеки — сделай сам». Для реализации обычного вертикального меню аккоредон нам понадобится всего 4 строчки кода на jQuery. Для красивого эффекта слайдинга раскрывания/скрывания пунктов меню нам понадобится jquery функция slideDown/slideUp. Для верной семантичной структуры html кода мы сверстаем меню с помощью ul>li, ведь списки, пункты меню и другие навигационные элементы должны верстаться с помощью ul>li.

Поместим в li теги p и div, в p будет пункт меню, в div — содержание/описание пункта меню(раскрывающая часть). Посмотрим html код:


Стилизуем html в стиле вертикального аккордеон меню, выделим пункт меню градиентом и выделим активный пункт отдельным цветом градиента:

Есть 2 варианта работы аккордеон меню:

— возможность раскрыть несколько пунктов. Как раз тот код, что выше.

— только 1 активный пункт меню. Раскрыв 1 пункт, остальные пункты скрываются автоматически:

2 варианта работы аккордеон меню можно посмотреть в демо-примере:

Меню аккордеон на JS

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

Меню аккордеон обычно используют для блока часто задаваемых вопросов.

Демонстрация меню аккордеон.

HTML структура

Создадим 3 кнопки с классом accordion, ниже которых поместим дивы с классом panel. Внутри блоков, будут параграфы с текстом.

Ответ на Вопрос 1.

Ответ на Вопрос 2.

Ответ на Вопрос 3 .

Картинка пока невзрачная, добавим стилей и спрячем секции с текстом.

CSS код

Стилизация кнопок, которые используются для открытия и закрытия панели аккордеона.

.accordion <
background-color: #cfd8dc;
color: #fff;
… >

При наведении курсора на кнопку и при клике по ней, будет меняться цвет фона. Для смены цвета при клике, мы повесим на функцию в JS класс active.

.active, .accordion:hover <
background-color: #607d8b;
>

Стилизация блоков с текстом (ответы на вопросы). По умолчанию эти блоки спрятаны за счет нулевого свойства максимальной высоты.

JS код

Объявим две переменные, первая переменная будет получать элемент по названию класса accordion. Вторая переменная с названием i.

var acc = document.getElementsByClassName(«accordion»);
var i;

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

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

Метод toggle добавляет и удаляет класс active для замены цвета кнопки, управляющей панелью.

Назначаем переменной с названием panel – свойство nextElementSibling, это переключатель между скрытием и показом активной панели.

var panel = this.nextElementSibling;

Для раскрытия, спрятанных блоков с текстом (эффект аккордеона), надо менять максимальную высоту, в зависимости от высоты панели на разных размерах экрана. Сначала делаем проверку, если значение максимальной высоты в стилях для блока с классом panel, равно нулю, то новая максимальная высота станет больше на энное количество пикселей, в зависимости от размера экрана у пользователя.

if (panel.style.maxHeight) <
panel.style.maxHeight = null;
> else <
panel.style.maxHeight = panel.scrollHeight + «px»;
>
>);
>

Добавление иконок

Для наглядности все кнопки следует снабдить символами, где символ плюс указывает на сложенный аккордеон, а минус – на раскрытый. При клике на кнопку, знак плюс меняется на знак минус.

Это подходящий случай для применения псевдокласса after. Код для content, можно найти в таблице символов Юникода.

.accordion:after <
content: ‘\002B’; /* Код Юникода для символа «плюс» (+) */
color: #fff;
font-size: 18px;
float: right;
margin-left: 4px;
>

.active:after <
content: «\2212»; /* Код Юникода для символа «минус» (-) */
>

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

На CodePen вы можете увидеть весь код меню аккордеон на чистом JS, который можно скачать и использовать в своих проектах.

Хотите научиться создавать на чистом JS больше интерактивных компонентов? Вам поможет замечательный видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Топ-пост этого месяца:  Урок 34. Создание темы. Часть 2

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):

  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

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

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

    Многоуровневое аккордеон-меню

    Простое аккордеон-меню средствами CSS.

    Данный пример разработан исключительно средствами CSS, а именно гвоздём программы стал псевдо-класс :checked. Так же мы добавили и версию с применением jQuery в случае если вы захотите каких-то анимационных эффектов.

    Структура

    HTML структура довольно-таки проста: аккордеон представляет собой ненумерованный список. Если у элемента есть вложенность, то мы добавляем input[type=checkbox] и название. Так же присваиваем этому элементу класс .has-children . Все “стандартные” элементы списка содержат якоря.

    Добавляем стиль

    Для отслеживания выборки элемента мы используем специальную технику: используя элемент checkbox, мы сможем воспользоваться псевдо-классом :checked и сменить отображение потомков с “none” на “block”.

    Шаг за шагом: прежде всего мы должны убедиться, что checkbox покрывает все элементы меню. Другими словами, нам нужно настроить checkbox под себя. Во-первых, при клике по label , checkbox должен заполняться/очищаться. Для этого мы используем атрибут “for” элемента label (атрибут label “for” = атрибуты input “name” и “id”. См. html код выше). Таким образом мы можем спрятать элемент input и работать с label .

    Теперь обратите внимание на HTML: input , label и ненумерованный список — соседи. При клике по checkbox (по факту клик по label ), извлекается

      элемент и меняется режим отображения с “none” на “block”:

    Если вы хотите добавить анимацию, то подключите .js файл. После этого добавьте класс .animate элементу .cd-accordion-menu (смена направления стрелок).

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: https://codyhouse.co/gem/css-multi-level-accordion-menu/
    Перевел: Станислав Протасевич
    Урок создан: 28 Октября 2015
    Просмотров: 29266
    Правила перепечатки

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

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

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

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

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


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

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

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

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

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

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

    Вертикальное меню аккордеон jQuery, пару вопросов?

    Всех приветствую, на просторах рунета нашел jQuery аккордеон, установил и, в принципе, все работает, но есть пара моментов, которые хотелось бы исправить, а т.к. в jQuery не силен (пока только изучаю), прошу помощи.
    Так вот:

    При перезагрузке страницы (с чисткой кэша постоянно (ctrl+F5), а так через раз) аккордеон сначала полностью разворачивается, а только потом становиться на места, если прописать display:none для submenu, то сначала всех родителей мы видим закрытыми (т. к. мы задали стили) и только после полной загрузки родитель который был открыт, снова откроется.
    куки используются и открытый родитель сохраняется, вот только срабатывает с опозданием (не могу понять почему??)

    Топ-пост этого месяца:  Плагин Long Form Storybuilder для WordPress

    Помогите поправить?? Уже всю голову сломал.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 53268fa6abad8ef5 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    Меню аккордеон

    В примере представлены два варианта вертикального меню «Аккордеон».

    В первом варианте, при клике на корневом пункте, показываются подменю второго уровня (если таковые имеются). Что бы их свернуть, требуется еще раз кликнуть на корневом пункте меню. Таким образом, можно сделать видимыми все скрытые пункты.

    Второй вариант демонстрирует несколько другой алгоритм работы. Единовременно видимым остается только подменю активного корневого пункта. При клике на следующем корневом пункте текущее подменю прячется и открывается подменю второго уровня, принадлежащее корневому пункту, по которому был сделан клик.

    В этом материале показан код обоих вариантов, даны ссылки на демонстрационный пример и скачивание архива с примерами. О том, как написать подобный код самостоятельно, подробно рассказывается в статьях Простейший аккордеон и Расширяем функциональность аккордеона.

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

    Вариант стилевого оформления:

    Второй вариант. Меню Аккордеон с автоматическим закрытием неактивного подменю.

    html и css код остается без изменений. Нужно только поменять id у родительского контейнера (ul), если предполагается разместить оба варианта на одной странице.

    jQuery код для второго варианта (в примере оба меню размещены в одном документе):

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

    Меню протестированы в IE 7-8-9, Chrome, Safari, Opera, FF и везде демонстрируют одинаковый результат.

    Вертикальное раздвижное меню на jQuery (гармошка, аккордеон)

    Доброго времени суток. ��

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

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

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

    Как сделать раздвижное меню? В этом нам поможет — jQuery. С помощью него, все будет работать плавно и красиво, как в примере выше. Приступим к реализации раздвижного меню и выполним несколько пунктов.

    jQuery скрипт

    Как и обычно, при работе с jQuery, нужно подключить его библиотеку. Все как обычно, в шапке или подвале осуществляем подключение, если конечно, Вы этого не делали раньше, для других скриптов.

    После библиотеки добавляем скрипт. который будет совершать анимацию.Скриптов будет 3, каждый из них по разному совершает анимацию.

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

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

    HTML разметка

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

    Сложного ничего нет, все организовано с помощью — ul-списков.

    CSS стили

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

    Больше ничего не нужно. Данный способ не очень сложный и имеет несколько видов реализации, все зависит от выбранного Вами скрипта.

    На этом все, спасибо за внимание. ��

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

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