С помощью небольшого плагина мы создадим анимированное меню, которое будет занимать весь экран и будет находится вверху страницы (то есть не будет занимать место на самой странице, а лишь в 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».
Вывод
Простой в использовании плагин, который позволяет создать красивое анимированное меню у себя на сайте. Также это меню можно сделать фиксированным (при прокрутке меню это меню будет зафиксировано сверху) — урок о фиксированном позиционировании.
Успехов!
С Уважением, Юрий Немец