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

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

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

HTML

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

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

CSS

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

[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; }
[/css]

JQuery

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

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

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

[javascript]
$(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); //Анимация возврата картинки к маленькому размеру
});
});

[/javascript]

Internet Explorer

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

[css] img { -ms-interpolation-mode: bicubic; } [/css]

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

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

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