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

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

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

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

Источник

Большой обзор красивых многоуровневых меню с codepen

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW

Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN

3D nested navigation

Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi

Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb

Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb

Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR

Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR

KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ

CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

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

Источник

Вертикальное выпадающее меню на CSS и JS

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

Цветовая схема вертикального меню легко редактируется в CSS, данное оформление продумано для сайтов с темным оформлением.

JavaScript

указывайте ровно столько подпунктов, сколько хотите использовать. Если, например, Вы хотите использовать 6 подпунктов, указывайте их все:

200?’200px’:»+(this.scrollHeight+5)+’px’);»> #m_body li ul <
display: none;
>
#m_body li:hover ul, #m_body li.over ul <
display: block;
>
#m_body <
text-align:left;
background:#222222;
width: 200px;
>
#m_body a <
display: block;
width: 185px;
padding-left: 15px;
>

#m_body ul li <
list-style-type: none;

#m_body ul li a <
color: #6F6F6F;
text-decoration: none;
font-size: 12px;
font-family: Verdana;
>

#m_body ul li a:hover <
color:#FFFFFF;
text-decoration: none;
background:#2C2C2C;
>

#m_body ul li ul li <
border: 0;
list-style-type: none;
list-style-position: inside;
background:#2681DC;
border-bottom:1px solid #3C8FDF;
>

#m_body ul li ul li a <
color:#9ECAF4;
>

#m_body ul li ul li a:hover <
color:#FFFFFF;
background:#2681DC;
>

Раскрытие пунктов вертикального выпадающего меню (выпадение по-другому) осуществляется при клике на пункт, т.е. используется событие onclick. В случае же если хотите осуществить раскрытие при наведении, используйте mouseover.

Источник

jQuery для начинающих. Часть 2. JavaScript Меню.

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

Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.

Slide меню

Два slide-меню на странице: вверху и внизу.

Кликаем по ссылке с классом «btn-slide», выезжает панель с меню.

Частично данный пример присутствует в первой части, так что особо углубляться в реализацию не буду, приведу лишь JavaScript код с пояснениями:

Slide меню 2

Slide-меню слева и справа страницы. Для начала приготовим HTML:

У нас должно получиться что-то наподобие следующего:

Теперь создадим обработчик событий для ссылок с классом «btn-slide»:

Затем нам необходимо найти элемент с классом «panel» и выдвинуть его на 120 пикселей:

Соединяем это вместе:

Drop-down меню

Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню, его конечно можно реализовать при помощи CSS, но статья у нас о jQuery, так что будем орудовать оным. Начнем с HTML’a (замечу, что для всех остальных примеров код практически не отличается):

Ну и собственно сам HTML:

Далее нам необходимо добавить обработчик для события hover для элементов li:

И отображаем под-меню:

А теперь всё вместе:

Drop-down AJAX меню

Горизонтальное выпадающее меню с подгрузкой элементов AJAX’ом.
Для начала нам понадобится само меню:

И заготовки для подменю, назовем их menu1.html, menu2.html и menu3.html — по id соответствующих элементов меню (скорей всего данные элементы будут генерироваться динамически, но для упрощения примера используем статические странички):

Теперь, как и в предыдущем примере, нам необходим обработчик события hover:

Теперь необходимо загрузить недостающие элементы меню посредством AJAX’a:

Drop-down меню

Вертикальное выпадающее меню. Достаточно простенький примерчик:

Float меню

Плавающее меню. Нам понадобится плагин Dimensions (дабы работали методы height() и width()). Ну с HTML я думаю, Вы разберетесь:

Теперь по порядку — начнем с получение информации о текущем расположении «плавающих» меню:

Далее, нам необходимо «повесить» свою функцию для события scroll:

Ну и собственно наполнение:

Так же добавим отображение/скрытие элементов подменю:

Источник

Вертикальное меню для сайта на Javascript

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

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

Так выглядит в рабочем состояние:

h1 <
text-align: center;
width: 90%;
margin: 2em auto 0;
font-size: 2.4rem;
color: #507b55;
font-weight: bold;
>
@media only screen and (min-width: 600px) <
h1 <
font-size: 3.2rem;
>
>

input <
font-family: «Jaldi», sans-serif;
font-size: 1.6rem;
>

if( accordionsMenu.length > 0 ) <

Разве только hover эффект при наведении здесь распределен по всем категориям и разделам, что можно каждому задать свой оттенок. То в первой навигаций только можно изначально выставить 2 эффекта, но это так на будущее. Так как можно посмотреть на demo странице первый и второй, а точнее этот вариант.

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

Источник