Меню jquery вертикальное: Вертикальное меню аккордеон на jQuery · Блог веб-студии Keengo

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

Меню, как известно – неотъемлемая часть сайта. Интересная навигация интернет-ресурса способна заинтересовать посетителей. Кроме того, важное свойство любого меню – его компактность. Простое вертикальное меню легко создается при помощи HTML и CSS. Но мы пойдем дальше: поучимся создавать меню-«аккордеон» при помощи jQuery.

Создаем меню-«аккордеон»

Что такое вертикальное меню в виде аккордеона? Это такой раскрывающийся список, который создает удобную навигацию и придает стильность сайту. Меню, выполненное в таком виде, позволяет включить в себя много подпунктов. Доступ к ним происходит при щелчке мышки по необходимому элементу. Кто-то скажет, что можно сделать простое меню в таком стиле без применения jQuery. Да, это так. Но подобный объект будет не очень удобно использовать обладателям планшетов или смартфонов. Давайте создадим вертикальное меню, привлекательное для всех. Потом, меняя цветовую стилизацию такой навигации, можно будет подстроить дизайн под любой сайт.

Код HTML

Итак, чтобы создать наше вертикальное меню, сначала надо набрать HTML-код, который будет содержать следующие строки:

Сохраните данный код в файле под названием Accord_menu.html.

Как видите, мы создали неупорядоченный список. Он состоит из 3 основных пунктов:

— фотографии;

— фильмы;

— книги.

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

CSS-код

Со стилями у вас не должно быть трудностей. Отметим только, что в данном примере используется градиентная заливка. Вот как выглядит CSS-код:

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

#e1fee2 – это нежно-салатовый цвет подпунктов.

#c4f0f7 –голубоватый оттенок подпунктов при наведении на них курсора.

Свойству display задаем значение block, чтобы регулировать необходимые отступы и размеры. Цвет, размер, тип шрифта, расположение – все это также опишите в файле CSS. Назовите его, например, accordionmenu_my1.css.

Подключение jQuery для усовершенствования меню

Как вы помните, наша цель — создать вертикальное меню jQuery. Если вы плохо знакомы с данной технологией, не расстраивайтесь. Воспользуемся репозиторием Google и подключим скрипт JQuery. Это сделает меню привлекательнее. jQuery представляет собой библиотеку JavaScript, основанную на взаимодействии гипертекстовой разметки HTML и JavaScript. jQuery позволяет обращаться к содержимому и атрибутам элементов.

Итак, подключаем необходимый скрипт в теле HTML-файла и задаем правила по хранению 2 переменных, исключая скачки элементов. Вносим код, закрывающий остальные вкладки при открытии той, по которой происходит клик мышью. Вот как это все выглядит:

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

вертикальное » Скрипты для сайтов

19.04.2016 9 780
Скрипты / Menu & Nav

Slide out sidebar меню

  Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.

31.07.2014 13 892
Скрипты / Accordion

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

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

30.07.2014 5 184
Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

15.05.2013 7 094
Скрипты / Menu & Nav

Адаптивное многоуровневое меню

Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. «Детки» заменяют собой «родителей» не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.

03.01.2013 6 123
Скрипты / Menu & Nav

Дерево меню на jQuery

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

17.05.2012 2 207
Скрипты / Menu & Nav

CSS3 эффекты для меню

Анимируем меню, используя свойства css3 не прибегая к помощи jQuery.

05.04.2012 1 726
Скрипты / Menu & Nav

Меню с эффектом размытия

Пример создания просто CSS3 меню с эффектом размытия (blur).

27.11.2011 1 457
Скрипты / Menu & Nav

Меню — «сюрприз»

Меню под названием «сюрприз» с эффектами easing . Простенько исимпатично. Реализовано на jQuery и CSS3.  

15.11.2011 3 052
Скрипты / Menu & Nav

Анимированное меню на CSS

Простое, красочное и элегантное вертикальное меню анимированное с помощью CSS3.

14.11.2011 2 304
Скрипты / Menu & Nav

Динамичное меню

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

28.10.2011 1 694
Скрипты / Menu & Nav

Интересное меню на CSS и jQuery

Выпадающее меню с плавным эффектом появления подпунктов и фоновым изображением для них. Поддерживается Firefox, Safari, Chrome.

05.10.2011 1 948
Скрипты / Menu & Nav

Выпадающая навигационная панель

Навигационная панель с различными выпадающими элементами: обычный список, изображение, оформленные на css ссылки. В целом обычное меню, но и всё гениаальное просто. Плагин для jQuery может использоваться, как для горизонтального, так и для вертикального меню.

• Назад
• 1
• 2
• Вперёд

«Умное» раскрывающееся вертикальное меню на jquery за 2 минуты

Сейчас поговорим о том, как за 2 минуты сделать своё выпадающее меню, не обделённое мозгами, на скриптах, не прибегая к дополнительным модулям.

Допустим, у нас есть такое праймари меню:

• Топ 100
• Графика
  • Абстракция
  • Кино
  • Компьютерная графика

Задача.
При нажатии на пункт меню, который не имеет подменю, должна открываться новая страница (как в обычном меню). А если пункт меню имеет подменю, то страница не должна открываться, а должно выезжать подменю. Надо написать «умный» скрипт, который будет за этим следить.

Решение
Сначала выводим в нужное нам место праймари меню. Можно через блок, можно через page.tpl.php, кому как удобнее. Я обычно вывожу вторым способом:

<?php if ($primary_links): ?>
  <div id = "menu"><?php print menu_tree('primary-links'); ?></div>
<?php endif; ?>

В общем, вывели меню. Для него подойдёт следующий css:

div#menu ul {
  padding: 0;
}
 
div#menu ul li {
  display: block;
  border-bottom: 1px solid #211f1b;
  margin-bottom: 5px;
  padding: 0;
}
 
div#menu ul li a {
  color:#211F1B;
  display:block;
  font-family:Verdana;
  font-size:18px;	
  font-weight:bold;
  padding:5px 0;
}
 
div#menu ul li a:hover,
div#menu ul li a.active,
div#menu ul li a:active {
  color: #005693;
  text-decoration: none;	
  outline: none;
}
 
div#menu ul ul {
  display: none; /* собственно, самое важное :) */
}	
 
div#menu ul ul li {
  border: none;
  margin: 0;
}
 
div#menu ul ul li a {
  font-size: 11px;	
  padding-left: 20px;
}
 
div#menu ul ul li a:hover,
div#menu ul ul li.active-trail a {
  background: #b7b7b7;
  color: #fff;
}
 
div#menu ul ul li.active-trail ul li a {
  background: #fff;
  color: #000;
}

Теперь осталось создать скрипт, который будет раздвигать пункты меню, имеющие подменю. Создаём файл menu.js и добавляем туда такой текст:

$(document).ready(function() {
  $('div#menu>ul>li>a').click(function() {
    if ($(this).parent().find('ul').length) {
      $(this).parent().find('ul').slideToggle(200);				
      return false;
    }
  });
});

Подключаем наш скрипт в шаблон. Чистим кэш. Проверяем, наслаждаемся.

Таким же образом можно сделать и горизонтальное меню, слегка поменяв css.

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

Меню, как известно – неотъемлемая часть сайта. Интересная навигация интернет-ресурса способна заинтересовать посетителей. Кроме того, важное свойство любого меню – его компактность. Простое вертикальное меню легко создается при помощи HTML и CSS. Но мы пойдем дальше: поучимся создавать меню-«аккордеон» при помощи jQuery.

Создаем меню-«аккордеон»

Что такое вертикальное меню в виде аккордеона? Это такой раскрывающийся список, который создает удобную навигацию и придает стильность сайту. Меню, выполненное в таком виде, позволяет включить в себя много подпунктов. Доступ к ним происходит при щелчке мышки по необходимому элементу. Кто-то скажет, что можно сделать простое меню в таком стиле без применения jQuery. Да, это так. Но подобный объект будет не очень удобно использовать обладателям планшетов или смартфонов. Давайте создадим вертикальное меню, привлекательное для всех. Потом, меняя цветовую стилизацию такой навигации, можно будет подстроить дизайн под любой сайт.

Код HTML

Итак, чтобы создать наше вертикальное меню, сначала надо набрать HTML-код, который будет содержать следующие строки:

Сохраните данный код в файле под названием Accord_menu.html.

Как видите, мы создали неупорядоченный список. Он состоит из 3 основных пунктов:

— фотографии;

— фильмы;

— книги.

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

CSS-код

Со стилями у вас не должно быть трудностей. Отметим только, что в данном примере используется градиентная заливка. Вот как выглядит CSS-код:

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

#e1fee2 – это нежно-салатовый цвет подпунктов.

#c4f0f7 –голубоватый оттенок подпунктов при наведении на них курсора.

Свойству display задаем значение block, чтобы регулировать необходимые отступы и размеры. Цвет, размер, тип шрифта, расположение – все это также опишите в файле CSS. Назовите его, например, accordionmenu_my1.css.

Подключение jQuery для усовершенствования меню

Как вы помните, наша цель — создать вертикальное меню jQuery. Если вы плохо знакомы с данной технологией, не расстраивайтесь. Воспользуемся репозиторием Google и подключим скрипт JQuery. Это сделает меню привлекательнее. jQuery представляет собой библиотеку JavaScript, основанную на взаимодействии гипертекстовой разметки HTML и JavaScript. jQuery позволяет обращаться к содержимому и атрибутам элементов.

Итак, подключаем необходимый скрипт в теле HTML-файла и задаем правила по хранению 2 переменных, исключая скачки элементов. Вносим код, закрывающий остальные вкладки при открытии той, по которой происходит клик мышью. Вот как это все выглядит:

Сохраните все изменения, посмотрите, как выглядит меню в браузере. Вот общий результат работы:

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

аккордеон – Dobrovoimaster

Категории: jQuery
16.05.2017

В своих статьях, я не раз обращался к теме создания вкладок(табов), работающих с использованием библиотеки javascript jQuery, а так же рассказывал и показывал примеры реализации вкладок исключительно средствами CSS. Табы(вкладки), довольно популярный компонент в среде разработчиков веб-сайтов, этот элемент включён в состав практически всех известных фреймворков, чаще всего они однотипные и по дизайну, и по…

Категории: Уроки
02.12.2016

В своих статьях, я не раз уже касался темы создания блоков в стиле «аккордеон», как на чистом CSS, так и с использованием jQuery, но каждый раз возвращаюсь, ищу новые решения, экспериментирую пытаясь найти вариант одинаково хорошо работающий на всех устройствах, во всех браузерах, и был максимально понятен любому веб-мастеру, для реализации в своих новых проектах.…

Категории: jQuery
27.08.2015

Представляю на ваше рассмотрение очередной вариант блоков с скрытым содержанием в стиле вертикального «аккордеона», плавно раскрывающихся по клику. В интернетах можно легко найти немало интересных решений по созданию «аккордеонов», как горизонтальных так и вертикальных. Очень популярны компактные, многоуровневые меню в стиле «аккордеон», точно так же, как и раскрывающиеся панели с скрытым контентом, работающих на jQuery…

Категории: jQuery
26.04.2015

Однажды я выложил развернутый урок по созданию компактного меню в стиле аккордеон, раскрывающееся по клику, со встроенным счётчиком подпунктов. Меню получилось довольно симпатичным и функциональным. Внешний вид сформирован исключительно на CSS3, градиентная заливка, внешняя тень блока и т.д. Работа меню построена на библиотеке jQuery, исполняющий плагин получился очень лёгким и простым в настройках, так что…

Категории: Уроки
22.10.2014

Предлагаю очередной вариант компактного блока «аккордеон», или если хотите, раскрывающегося меню, сформированного на чистом CSS, и работающего на скрытых чекбоксах, используя различные комбинации type=”radio” и type=”checkbox”. Не оставляю попытки найти самое оптимальное решение, с минимальным кодом, концепт «аккордеона» на чистом CSS, без использования js, которую бы поддерживали все современные браузеры. Идея конечно не нова, вариантов…

Категории: jQuery
31.08.2014

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

Категории: Уроки
22.03.2014

Различными блоками, менюшками выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных исключительно на CSS. Сегодня хочу познакомить вас с ещё одним вариантом компактного, вертикального меню в стиле «аккордеон», которое отлично впишется в боковую колонку любого сайта. Работа меню основана на…

Категории: HTML & CSS
17.02.2014

Существует много интересных решений и возможностей для создания эффектных, компактных блоков с содержанием, выполненных в стиле «Аккордеон». Самый надёжный в плане адекватной обработки и поддержки всеми браузерами, и наверное из-за этого самый популярный способ, это кроссбраузерное решение основанное на jQuery. Не оставляю попытки найти жизнеспособный прием реализовать простой анимированный аккордеон, с достойным функционалом и оформлением,…

Категории: Уроки
22.12.2012

В последнее время, в силу того, что практически все современные и популярные браузеры (Opera, Firefox, Safari, Chrome, Flock и даже вечный тормоз — IE), активно подключаются к поддержке новых свойств CSS3, стало возможным в плотную заняться разработкой, более-менее кроссбраузерного, компактного «аккордеона», раскрывающегося при наведении. Конечно, способов создания таких «гармошек», в интернетах можно найти на любой вкус…

Категории: jQuery
23.05.2012

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

jQuery Vertical Mega Menu — плагин-виджет вертикального выпадающего меню

JQuery Vertical Mega Menu Widget — бесплатный плагин, предназначенный для создания вертикального выпадающего меню в сайдбаре. Плагин предназначен для WordPress в целом, однако явно заточен под электронную коммерцию и может использоваться не только с WooCommerce, а и с другими плагинами для интернет-коммерции.
Посмотреть вложение 350
Мне встречалось несколько разных плагинов для создания разного рода структурированных, выпадающих менюшек в сайдбаре, однако этот плагин выделяется. Большинство из них автоматически создает меню на основе блоговых записей и категорий, на основе даты и месяца. Удобно, если у вас просто блог.
Рассматриваемый же плагин позволяет создавать совершенно любые менюшки на основе страниц, товаров, категорий, меток — чего угодно! Это именно то, что надо для каталога товаров, хотя придется немного повозиться — пункты добавляются вручную.
После скачивания, установки и активации плагина первое, что надо сделать — это создать необходимое меню, которое будет отображаться посредством плагина. В настройках сайта идем на вкладку «Внешний вид» -> «Меню» и создаем новое — ну допустим «menu2». Дальше наполняем его как хотим, делаем вложенные пункты. Для наибольшего эффекта рекомендуется делать 3-х уровневые пункты меню, тогда плагин наибольшим образом себя покажет. Поэкспериментировать можно и потом, первым делом главное создать хоть что-нибудь.
Когда меню создано, надо сделать так, чтобы плагин начал его отображать. Идем во «Внешний вид» -> «Виджеты», находим там новый виджет «jQuery Vertical Mega Menu» и помещаем его в нужное место на сайдбаре. Тут можно порыться немного в настройках, хотя главное сейчас — это выбрать наше предварительно созданное меню «menu2» и нажать «Сохранить». Меню создано, его можно просмотреть на сайте!

Посмотреть вложение 348
В настройках меню можно задать заголовок, выбрать нужное меню для отображения, выбрать количество колонок в развернутом меню, направление разворачивания, эффекты и скорость анимации, цветовой скин. Демонстрацию работы плагина в разных сочетаниях настроек можно просмотреть на странице разработчиков.
Изначально в плагин зашито 8 разноцветных стилей.
Посмотреть вложение 349
Однако отображение легко настраивается с помощью CSS (причем таблица CSS для каждого стиля своя, скопировал файлик white.css, переименовал в mybeststyle.css — вот тебе и новый скин «mybeststyle», который можно выбрать в настройках виджета ) и правкой фоновых картинок. Мне например пришлось вообще отказаться от использования картинок в качестве background’a в пользу простой цветовой заливки. К сожалению, из-за использования картинок менюшки отображались несколько некорректно, особенно когда пункт меню растягивался до двух строчек. Да и по цвету, по стилю мне родные скины не подходили. Немного терпения и знания CSS — и виджет изменяется как угодно, вплоть до добавления картинок.
Важный момент! Со многими темами плагин может сразу не заработать, но если внимательно читать readme, то разработчики рассказывают, как это лечится.

В вольном переводе — если основное меню отображается а выпадающее — нет, то проверьте, не установлено ли для сайдбара стилевое свойство overflow: hidden, которое как раз прячет все, что в сайдбар не помещается. Например, для темы Wootique это лечится добавлением в custom.css следующей строчки:

Код:

#sidebar{overflow:visible;}

В общем, немного терпения — и великолепный выпадающий каталог с товарами, а при желании — и с дополнительной информацией готов!
Скачать плагин JQuery Vertical Mega Menu Widget бесплатно можно здесь.

Различные JQuery меню для ваших сайтов

Далее представлено несколько симпатичных реализаций выпадающих меню на JQuery, которые вы при наличии некоторого количества знаний, сможете без особого труда пристроить на свои сайты.

pro_dropdown_3

Выпадающее многоуровневое вертикальное меню, сделанное с примением JavaScript, и не без JQuery. По внешнему виду чем-то напоминает (отдаленно) элементы пользовательского интерфейса ОС Windows Vista / темы для Windows XP и т.п. Возможно все дело в фоновых картинках?

Просмотреть Скачать

pro_dropline_2

Практически тоже самое выпадающее JQuery-меню, что и в прошлом примере, но со следующим отличием: двухуровневое с горизонтально расположенными вложенными элементами.

Просмотреть Скачать

tree_frog_vertical

Вертикальное минималистичное JQuery-меню в стиле «аккордеон» с дополнительными выпадающими / выезжающими дочерними элементами для размещения в боковых колонках а-ля сайдбарах. Выполнено с примением красного, фиолетового и оранжевато-коричневого цветов.

Просмотреть Скачать

Makisu

Для практического применения малопригодное, но зато интересное анимированное меню под названием «Makisu». Работает к большому сожалению только в Firefox и Chrome (в Opera нет анимации, а про Internet Explorer и вспоминать страшно). Пункты складываются и раскладываются, как смятая бумажка. Скачать это чудо можно на GitHub.

Просмотреть Скачать

Раскрывающееся меню на CSS3

Меню с квадратиками и значками, разноцветное, с простой анимацией выпадающих элементов.

P.S. В кроссбраузерности такого решения приходится очень сильно сомневаться, но зато работает вообще без JavaScript на одном только CSS3. Выгядит неплохо, но исходники монструозны.

Просмотреть Скачать

Меню jQuery для Bootstrap с вертикальными демонстрациями, анимацией и наведением курсора

MetisMenu — это подключаемый модуль jQuery, который вы можете использовать с платформой Bootstrap (версия 3+) для создания различных типов меню, таких как вертикальное меню, меню с представлением папок.

Вы также можете создавать пункты меню, которые открываются при наведении курсора мыши и с различными анимациями, такими как bounceIn, fade, flip и другие.

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

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

Посмотреть онлайн-демонстрацию и код

Так создается меню.

Прежде всего, включите Bootstrap, font-awesome, metisMenu и CSS для этих демонстрационных файлов в раздел (вы можете увидеть CDN и локальные ссылки в разделе кода демонстрационной страницы).

Раздел разметки включает создание тегов div, nav, ul и т. Д., В которых упоминаются классы CSS Bootstrap и подключаемого модуля. Например, это полная разметка меню демонстрации:

Прямо над тегом разместите JS-файлы jQuery, Bootstrap и плагина.Наконец, код jQuery для запуска меню:

Используя параметр toggle как false , вы можете создать несвертываемое меню.Это означает, что если вы откроете первое меню и нажмете на второй заголовок, первое меню не закроется. Вы можете сравнить это с приведенным выше примером, где открываются только отдельные пункты меню, а другие (если открыты) закрываются.

Посмотреть онлайн-демонстрацию и код

Единственное различие между этим и первым примером — это код jQuery, в котором используется опция переключения:

Используя атрибут dir = ”rtl” в главном меню, содержащем div, вы можете создать меню справа налево. См. То же меню с директивой rtl:

Посмотреть онлайн-демонстрацию и код

Отличие только в главном