многоуровневое вертикальное меню 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
Здесь до этого уже на сайте разместил материал, под названием многоуровневое меню с помощью 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 странице первый и второй, а точнее этот вариант.
Просматривая похожие код навигаций для сайта, то вообще еще ранее размещал на портале, но только файлом, что также можете рассмотреть и этот вариант, который больше всего больше аналогичен этому материалу.