Создаем эластичное меню из миниатюр

Еще один интересный пример навигации — из миниатюр. У него есть как минимум два преимущества — работает просто и выглядит эффектно. Сделать такую навигацию под силу любому пользователю, поэтому сегодняшняя статья, скорее похожа на заметку, чем на полноценную инструкцию.

Итак, как обычно взгляните на конечный результат, и если понравилось, читатайте далее.

HTML

HTML очень простой. Каждый пункт меню представляет собой ссылку, внутри которой расположено изображение:

<div id="menuwrapper">
<div id="menu">
  <a class="menuitem" href="#">
      <img src="image.jpg" alt="" />
   </a><!--Шаблон для каждого пункта меню-->
</div>
</div>

CSS

Обычно, при ресайзе контейнера <div>, его высота увеличивается, причем он растет вниз. Однако, в нашем меню, нам нужно получить прямо противопложный результат — когда пользователь подводит мышью к миниатюре, она должна «вырасти», направляясь вверх (совсем как док в OSX). Для получения такого эффекта, мы будем использовать свойство position: fixed, которое поможет нам «зафиксировать» пункты меню по нижнему краю. Итак, вот какой будет CSS:

/* Контейнер, для нашего меню */
#menuwrapper{ position:relative; height:210px; }

/* Устанавливаем меню по нижнему краю родительского div-a */
#menu{position:absolute; bottom:0;}

/* Каждый пункт меню фиксируем по нижнему краю, и назначаем display:inline-block для создания эластичности */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }

JQuery

jQuery в этом примере выполняет две функции:

• уменьшает картинки при загрузке страницы
• добавляет анимацию «растущей» картинке, при наведении мыши

Далее показан пример кода, который сможет все это реализовать:

$(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

И все бы хорошо, но IE как всегда порадовал неприятным сюрпризом, для того чтобы ваше меню красиво ресайзилось в Internet Explorer, вам нужно добавить одну строчку кода в CSS:

 img { -ms-interpolation-mode: bicubic; } 

Вот и все, после этого, ваше меню готово к использованию.

Архив с приведенным примером.

Оригинал статьи «Sproing! – Make An Elastic Thumbnail Menu«, автор Sam Dunn