Лого SiteHere.ru

Полностью анимированное меню на 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».


Вывод

Простой в использовании плагин, который позволяет создать красивое анимированное меню у себя на сайте. Также это меню можно сделать фиксированным (при прокрутке меню это меню будет зафиксировано сверху) — урок о фиксированном позиционировании.


Успехов!

С Уважением, Юрий Немец

Источник: http://www.onextrapixel.com/2014/05/22/create-a-fully-animated-full-page-menu-with-jquery-fullpage-menu-js/

3 комментария к записи
  • Валентина Александровна

    Скачать не проблема, а вот как установить на сайт ? а плагин мне понравился. Спасибо!

     
    • Юрий

      Валентина, чтобы его установить себе на сайт, нужно знать код шаблона и функцию, которая выводит меню. Если вы очень хотите себе сделать такое меню (но сами не сможете установить), тогда свяжитесь со мной (мои контакты есть на странице «Об авторе» ).

       
  • Геннадий

    Валентина задала самый актуальный вопрос. Данные пояснения может понять только продвинутый пользователь, но ведь они ему уже не нужны. Не могли бы Вы все обьяснить более доходчиво. Спасибо!

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *