меню jquery выпадающее вертикальное меню
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:
Ну и собственно наполнение:
Так же добавим отображение/скрытие элементов подменю:
Меню jquery выпадающее вертикальное меню
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Анимация фона при прокрутке страницы
Анимируем SVG фигуры при прокрутке страницы.
Пример 3D помещения выставки
Экспериментальная 3D проекция помещения галереи.
Вертикальное раздвижное меню на jQuery
В данной теме мы хотим предложить Вам очень красивый и полезный скрипт вертикального раздвижного меню, реализованного при помощи jQuery.
Сразу хотим продемонстрировать Вам работу предлагаемого меню на примере. Для этого обратите внимание на меню, расположенное ниже:
Как Вы могли заметить, при клике по пунктам меню «Скрипты», «Онлайн-сервисы» или «Хитрости», меню разворачивается и показывается подменю. При клике по пунктам меню «Поддержка» или «Форум», сразу осуществляется переход к нужной страничке.
Как уже можно было догадаться из названия, для реализации подобного меню у себя на сайте Вам понадобится библиотека jQuery. Если данная библиотека на Вашем сайте еще не была подключена ранее, то следует это сделать следующим образом:
Дальше необходимо прописать CSS стиль для нашего меню. Чтобы оно выглядело точно так же, как и в примере, приведенном выше, используйте следующее оформление:
ul #menu a,ul#menu span
ul #menu li a,ul#menu li span <
background : #333333;
color : #FFFFFF;
padding : 7px ;
>
ul #menu li a:hover,ul#menu li span:hover
Меню, которое будет раздвигаться и сдвигаться при клике по его пунктам, следует прописать следующим образом:
Теперь остается лишь где-нибудь в конце странички добавить наш JavaScript код, который будет отвечать за сворачивание и разворачивание меню (его подпунктов). Для этого скопируйте себе данный JavaScript код:
Если же Вы хотите чтобы одновременно был открыт только один пункт меню, то замените выше приведенный JavaScript код на такой:
Как Вы уже могли заметить, пока страничка еще грузится, то меню полностью развернуто и видно все подпункты. Это не ошибка. Это специально сделано для того чтобы пользователи, которые отключили поддержку JavaScript, тоже могли пользоваться меню.
Выпадающего вертикально меню на jQuery
Для увеличения полезного пространства на сайте можно уменьшить размер меню за счет добавления вертикально выпадающих пунктов меню. Таким образом, изначально будут видны только основные разделы меню. При наведении курсора мышки на один из разделов (пунктов) меню, ниже плавно появится список с подразделами данного раздела.
Для демонстрации работы скрипта, создающего выпадающее вертикально меню, реализованного на jQuery, обратите внимание на небольшое меню, расположенное чуть ниже. Чтобы понять, как оно работает, наведите курсор мышки на один из пунктов меню:
Для реализации подобного вертикально выпадающего меню у себя на сайте Вам понадобится библиотека jQuery. Если данная библиотека на Вашем сайте еще не была подключена ранее, то Вам понадобится подключить ее следующим образом:
Для того чтобы получить точно такое же меню, как в примере выше, в шапку своего сайта (между тегами и ) добавьте стиль меню:
Далее, в том месте Вашего сайта, где будет располагаться выпадающее вертикально меню, необходимо добавить Ваше меню со всеми его разделами и подразделами следующим образом:
div class= «spoiler_links» > a href = «script.php» > b > Скрипты b > a >
div class= «spoiler_body» >
a href = «collapsing_menu.php» > Вертикальное меню a > br >
a href = «reflection_image.php» > Добавление отражения a > br >
a href = «serial_output_img.php» > Последовательный вывод a > br >
a href = «highlight_table_jquery.php» > Подсветка строк в таблице a >
div >
div >
div class= «spoiler_links» > a href = «useful_site.php» > b > Сервисы b > a >
div class= «spoiler_body» >
a href = «goqr_me.php» > Создание QR кодов a > br >
a href = «csscompressor.php» > Сжатие CSS кода a > br >
a href = «javascriptcompressor.php» > Сжатие JavaScript кода a >
div >
div >
После того, как меню добавлено, необходимо добавить скрипт, который будет при наведении курсора мышки на разделы меню показывать его подразделы и скрывать их, когда курсор мышки покидает область меню. Для этого скопируйте на свою страничку следующий код:
Как видите, на самом деле в коде нет ничего сложного, но при этом данный скрипт может быть очень полезен для экономии места, занимаемого большим количеством пунктов меню.
Выпадающее меню на jQuery
Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:
Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:
Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:
Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:
В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.
Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.
Далее идет следующая конструкция:
Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода «css(‘background’, ‘url(«down.png»)’)”, происходит присваивание свойству стиля «background» значения «url(«down.png»)». «down.png» – это иконка, показывающая, что список может раскрываться.
Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:
Мы ищем тег родительскому элементу которого присвоен hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.
В первой функции прописано:
После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.
После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:
Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function()<>)». Выглядеть это будет следующим образом:
Подключение нашего скрипта необходимо перенести из тега в самый конец, перед закрывающим тегом