В этом уроке мы создадим красивое эластичное пиктограммное меню с анимацией.
Итак что же оно умеет?
- Увеличивает значки меню при наведении курсора мыши.
- Значки выступают на передний план и увеличиваются в размере.
- Просмотрите пример работы меню.
Будем надеяться, что у Вас уже есть на примете значки для создания подобного меню, теперь давайте заставим их работать.
HTML
Синтаксис конструкции – прост и легок, выглядит следующим образом:
<div id="menuwrapper">
<div id="menu">
<a href="#" class="menuitem"><img src="image.jpg"></a><!--Шаблон для каждого элемента меню-->
</div>
</div>
CSS
Обычно при настройке контента через элемент <div>, увеличение производится к низу, то есть высота прибавляется к нижней части элемента, а не к верхней. Но нам требуется обратное – при наведении курсора мыши пиктограмма должна увеличиваться кверху.
Добьемся желаемого с помощью использования свойства position:fixed, которое позволит нам ''прикрепить'' элементы к нижней части панели меню. Давайте так же разобьем элементы.
/* Контейнер, к нижней части которого привязано меню */
#menuwrapper{ position:relative; height:210px; }
/* Привязываем меню к нижнему элементу div */
#menu{position:absolute; bottom:0;}
/* Каждый элемент меню привязан к нижней части панели; создадим эластичность с помощью свойства display:inline-block */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block;
jQuery
jQuery в моем примере служит двум целям:
1. Уменьшает размер изображения когда загружается страница
2. Анимирует и увеличивает изображения при наведении курсора мыши
Вот фрагмент кода, выполняющий все вышесказанное (с комментариями):
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0); //Уменьшает все элементы меню
$('.menuitem').mouseover(function(){ //При наведении курсора на элемент
gridimage = $(this).find('img'); //Определяет цель как переменную
gridimage.stop().animate({width: 200}, 150); //Изображение увеличивается до оригинального размера
}).mouseout(function(){ //При отведении курсора от элемента
gridimage.stop().animate({width: 100}, 150); //Снова уменьшает размер изображения
});
});
Настраиваем масштабирование изображения для Internet Explorer
Internet Explorer не будет правильно выполнять задачу, пока мы не добавим в наш CSS код следующую строчку:
img { -ms-interpolation-mode: bicubic; }
Вот теперь меню готово и будет ‘’прокручиваться’’ :)