Октябрь 22, 2019 Запись была обновлена
Полностью анимированное меню на Javascript
С помощью небольшого плагина мы создадим анимированное меню, которое будет занимать весь экран и будет находится вверху страницы (то есть не будет занимать место на самой странице, а лишь в 45 пикселей сверху). Плагин для создания анимированного меню содержит ряд настроек, которые мы также рассмотрим (можно устанавливать скорость анимации при появлении элементов меню, выбирать тип анимации, с которым будут появляться элементы списка).
Все примеры меню смотрите ниже по ссылке:
Посмотреть примерСкачать
Как сделать анимированное меню у себя на сайте?
HTML часть
Скачиваем библиотеку jQuery(здесь) и плагин jquery.fullpage-menu.js со стилями(здесь), а затем подключаем между тегами <head> </head>:
1 2 3 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="css/fullpage-menu.css" /> <script type="text/javascript" src="js/jquery.fullpage-menu.js"></script> |
Разметка несложная:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> .. <div class="sidemenu"> <ul class="fm-first-level"> <li><a href="#menu1">..</a></li> .. </ul> <nav id="menu1" class="active"> <a target="_blank" href="#"> <span class="subtitle">...</span> Элемент меню </a> .. </nav> </div> .. </body> |
Сами элементы меню находятся в блоке с классом sidemenu. Внутри есть маркированный список, который содержит две общие категории (в примере это «Главное меню» и «Рубрики»), и два блока <nav>, содержащих элементы двух этих категорий.
А сам переключатель размещается с помощью следующего кода:
1 | <div class="custom-navbar"><a class="fm-button" href="#">Меню</a></div> |
jQuery часть
С HTML мы закончили и сейчас перед закрывающим тегом </body> необходимо вставить следующий код:
1 2 3 4 5 6 7 | $(".sidemenu").fullpageMenu({ openButton: "Меню", closeButton: "Закрыть X", animationSpeed: 100, autoNumber: true, animation: "fadeInLeft" }); |
Что это за свойства:
- openButton — определяет текст, который расположен на кнопке открытия меню. По умолчанию этот текст «Меню».
- closeButton — определяет текст, который расположен на кнопке закрытия меню. По умолчанию этот текст «Закрыть X».
- animationSpeed — с помощью этого свойства можно определять скорость появления элементов меню. По умолчанию это значение равно 100.
- autoNumber — с помощью данного свойства можно задавать автоматическую нумерацию элементов меню. По умолчанию стоит значение true.
- animation — определяет тип анимации. Доступны следующие типы анимации: «fadeInLeft», «fadeInRight», «fadeInUp» и «fadeInDown».
Вывод
Простой в использовании плагин, который позволяет создать красивое анимированное меню у себя на сайте. Также это меню можно сделать фиксированным (при прокрутке меню это меню будет зафиксировано сверху) — урок о фиксированном позиционировании.
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Скачать не проблема, а вот как установить на сайт ? а плагин мне понравился. Спасибо!
Валентина, чтобы его установить себе на сайт, нужно знать код шаблона и функцию, которая выводит меню. Если вы очень хотите себе сделать такое меню (но сами не сможете установить), тогда свяжитесь со мной (мои контакты есть на странице «Об авторе» ).
Валентина задала самый актуальный вопрос. Данные пояснения может понять только продвинутый пользователь, но ведь они ему уже не нужны. Не могли бы Вы все обьяснить более доходчиво. Спасибо!