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

Опубликовано: 16 Ноябрь 2010Автор ratemir

Анимированное jQuery менюПредставляю Вашему вниманию навигационное меню, основанное на принципах jQuery. Мы создадим его, а после «оживим» с помощью придания ему некоторых эффектов. Вот демо анимированного меню, которое получится у нас в итоге.

Здесь имеются элементы, так называемой «плавной» анимации или ослабления(easing). То есть, мы можем видеть постепенное ускорение или замедление во время работы меню, которое помогает Вашей анимации выглядеть более реалистичной. Мы также, имеем возможность регулировать данные параметры.

Шаг 1. Создание HTML разметки.

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

<div id="animenu">
<ul>  
    <li class="green">  
        <p><a href="#">Главная</a></p>  
        <p class="subtext"><a href="#">Переход на главную страницу</a></p>
    </li>  
    <li class="yellow">  
        <p><a href="#">О сайте</a></p>  
        <p class="subtext">Больше информации</p> 
    </li>  
    <li class="red">  
        <p><a href="#">Контакты</a></p>  
        <p class="subtext">Что бы оставить сообщение</p>  
    </li>  
    <li class="blue">  
        <p><a href="#">Скачать</a></p>  
        <p class="subtext"><a href="#">Интересное</a></p>
        <p class="subtext"><a href="#">Полезное</a></p>
        <p class="subtext"><a href="#">Программы</a></p>
        <p class="subtext"><a href="#">Шаблоны</a></p>
    </li>  
    <li class="purple">  
        <p><a href="#">Статьи</a></p>  
        <p class="subtext">На разные темы</p>  
    </li>  
</ul>
</div>

Пункты меню содержат класс(class), который будет назначать цвет блока. К тому же, имеются заголовок и подзаголовок(class="subtext" по умолчанию скрыт). Данную часть кода нужно скопировать в любую часть страницы Вашего сайта, между <body>...</body>, в том месте где бы Вы хотели видеть меню.

Шаг 2. Стили CSS

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

#animenu{  
      font-family:"Lucida Grande", arial, sans-serif;  
      background:#F3F3F3;  
  }  
#animenu ul{  
       margin:0;  
       padding:0;  
   }  
#animenu ul li{  
       width:100px;  
       height:50px;
       float:left;  
       color:#191919;  
       text-align:center;  
       overflow:hidden;
       list-style:none;	   
   }  
#animenu a{  
      color:#FFF;  
      text-decoration:none;  
  }  
#animenu p{  
      padding:0px 5px;  
   }
#animenu .subtext{  
        padding-top:15px;  
     }  
  /*Menu Color Classes*/  
.green{background:#6AA63B;}  
.yellow{background:#FBC700;}  
.red{background:#D52100;}  
.purple{background:#5122B4;}  
.blue{background:#0292C0;}

Шаг 3. Анимация с jQuery

Весь наш jQuery код нужно будет положить в JavaScript файл(например, animated-menu.js), созданный нами ранее.

$(document).ready(function(){
       //When mouse rolls over  
        $("li").mouseover(function(){  
            $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
       });     
       //When mouse is removed  
       $("li").mouseout(function(){  
           $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
       });
	   //When mouse rolls over  
        $(".blue").mouseover(function(){  
            $(this).stop().animate({height:'250px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
       });     
       //When mouse is removed  
       $(".blue").mouseout(function(){  
           $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
       });
 });

Есть два главных действия в коде выше. При перемещении мыши по пункту меню, он начинает реагировать, увеличиваясь по высоте до 150 пикселей за 0,6 секунды. Значение «easeOutBounce» вызывает небольшой  «отскок(Bounce)», при достижении конца анимации «Out». Сам эффект достигается с помощью плагина jquery.easing.1.3.js который можно скачать на официальном сайте проекта. Открыв этот файл Вы заметите, что кроме эффекта «easeOutBounce», там есть и другие. Короче, экспериментируйте.

Чтобы применить эффекты данного скрипта к различным элементам сайта, необходимо просто, заменить соответствующее значение (в настоящее время «li») в коде, на выбранное Вами(можно «class», «id»).

Функция stop () прописана перед началом анимации, в целях предотвращения буферизации и неоднократной цикличности анимации, в случае, если курсор мыши быстро перемещается по меню, не задерживаясь над ним.

Шаг 4. Установка

Для полноценной работы, важно правильно прописать пути к ранее созданным Вами файлам. Адреса устанавливаются между тегами <head>...</head> следующим образом:

1
2
3
4
<link rel="stylesheet" href="http://ваш сайт/.../animated-menu.css" type="text/css" />   
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script type="text/javascript" src="http://ваш сайт/.../jquery.easing.1.3.js"></script>
 <script type="text/javascript" src="http://ваш сайт/.../animated-menu.js"></script>

На первой строке расположен файл CSS, в который мы скопируем стили. Далее, подгружаем с Google библиотеку jQuery. На третьем месте плагин easing. И на последней строке находится, добавленный нами небольшой код.

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

Метки: , Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

4 комментариев к “Анимированное jQuery меню”

  • Иван
    16 Ноябрь, 2010, 23:52

    Спасибо, интересные статьи. Не помешала-бы наверное и пара видео уроков для начинающих.

  • 17 Ноябрь, 2010, 16:44

    Видео? Может быть, в будущем... Ну а на данный момент, если появились вопросы, спрашивайте. Отвечу в меру моих знаний и опыта.

  • diz
    31 Декабрь, 2010, 12:55

    Очень удобный и красивый блог, щас наверное тоже сделаю типа того :-)

  • superfirst
    6 Январь, 2011, 16:16

    Теперь мне стало всё ясно, благодарю за нужную информацию.

Оставить комментарий

Наверх