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

Демонстрация работы – Скачать исходный код

Уменьшенные изображения, которые используются в этом уроке, можно найти на сайте DryIcons.com. Их не разрешено распространять под свободной лицензией, так что мы не включили эти уменьшенные изображения в архив с исходным кодом для скачивания. Но Вы легко найдете их здесь. Мы не переименовывали их для этого урока, так что Вы легко сможете воссоздать это меню без изменения названий или таблицы стилей.

Итак, давайте начнем!

HTML

Разметка состоит только из блока с ненумерованным списком внутри. В элементах списка находится тег span уменьшенных изображений и элемент ссылки:

<div>

<ul id="menu">

<li><span></span><a href="">Players</a></li>

<li><span></span><a href="">Cameras</a></li>

<li><span></span><a href="">TVs</a></li>

<li><span></span><a href="">Screens</a></li>

<li><span></span><a href="">Tools</a></li>

<li><span></span><a href="">Phones</a></li>

<li><span></span><a href="">Printers</a></li>

</ul>
</div>

CSS

Стили блока навигации и ненумерованного списка будут такими:

.navigation{

position:relative;

margin:0 auto;

width:915px;

}

ul.menu{

list-style:none;

font-family:"Verdana",sans-serif;

border-top:1px solid #bebebe;

margin:0px;

padding:0px;

float:left;

}

ul.menu li{

float:left;
}

Так как мы делаем список всплывающим, нам понадобится, чтобы у блока, в котором он находится, было относительное положение. Как Вы можете видеть, у уменьшенных изображений, которые будут фоновыми изображениями для тегов span нашего списка, будет абсолютное положение. Это пригодится, когда Вам понадобится определять значение параметра z-index, т. е., указывать, будет ли элемент накрывать или накрываться другим элементом. Так как мы хотим, чтобы уменьшенные изображения появлялись сверху, а потом исчезали под элементом ссылки, нам придется иметь дело с параметрами z-index. И абсолютное положение элементов в относительно расположенном контейнере позволит сделать это проще.

Теперь давайте определим стили для элементов ссылок:

ul.menu li a{

text-decoration:none;

background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;

padding:15px 0px;

width:128px;

color:#333333;

float:left;

text-align:center;

border-right:1px solid #a1a1a1;

border-left:1px solid #e8e8e8;

font-weight:bold;

font-size:13px;

-moz-box-shadow: 0 1px 3px #555;

-webkit-box-shadow: 0 1px 3px #555;

text-shadow: 0 1px 1px #fff;
}

Мы хотим задать элементам ссылок фиксированную ширину и градиент фона. Границы создадут милый эффект углубления.

Следующий класс для элементов, находящихся под указателем мыши, будет применяться при помощи jQuery, так как псевдокласс :hover создает нежелательный эффект. Когда уменьшенное изображение выезжает, оно накрывает собой ссылку на несколько миллисекунд, заставляя стиль элементов пвседокласса :hover исчезнуть в это время. Это воспринимается как мигание, и мы избежим этого эффекта, определяя класс, который мы добавим при помощи jQuery, когда мы создадим эффект выезжания уменьшенного изображения:

ul.menu li a.hover{

background-image:none;

color:#fff;

text-shadow: 0 -1px 1px #000;
}

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

ul.menu li a.first{

-moz-border-radius:0px 0px 0px 10px;

-webkit-border-bottom-left-radius: 10px;

border-left:none;

}

ul.menu li a.last{

-moz-border-radius:0px 0px 10px 0px;

-webkit-border-bottom-right-radius: 10px;
}

Общий стиль для всех тегов span уменьшенных изображений будет таким:

ul.menu li span{

width:64px;

height:64px;

background-repeat:no-repeat;

background-color:transparent;

position:absolute;

z-index:-1;

top:80px;

cursor:pointer;
}

Индивидуальные стили для определенных уменьшенных изображений будут содержать их фоновое изображение и горизонтальное расположение:

ul.menu li span.ipod{

background-image:url(../icons/ipod.png);

left:33px; /*128/2 — 32(половина уменьшенного изображения) +1 границы*/

}

ul.menu li span.video_camera{

background-image:url(../icons/video_camera.png);

left:163px; /* плюс 128 + 2px границы*/

}

ul.menu li span.television{

background-image:url(../icons/television.png);

left:293px;

}

ul.menu li span.monitor{

background-image:url(../icons/monitor.png);

left:423px;

}

ul.menu li span.toolbox{

background-image:url(../icons/toolbox.png);

left:553px;

}

ul.menu li span.telephone{

background-image:url(../icons/telephone.png);

left:683px;

}

ul.menu li span.print{

background-image:url(../icons/print.png);

left:813px;
}

Как вы можете видеть, мы располагаем уменьшенные изображения таким образом, что они отцентрированы внутри элемента ссылки. Изначально верхнее положение — 80px, так как мы хотим показать их пользователю, пока грузится страница. После этого мы спрячем их одно за другим, создавая шикарный эффект!

JavaScript

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

$(function() {

var d=1000;

$('#menu span').each(function(){

$(this).stop().animate({

'top':'-17px'

},d+=250);

});

$('#menu > li').hover(

function () {

var $this = $(this);

$('a',$this).addClass('hover');

$('span',$this).stop().animate({

'top':'40px'

},300).css({

'zIndex':'10'

});

},

function () {

var $this = $(this);

$('a',$this).removeClass('hover');

$('span',$this).stop().animate({

'top':'-17px'

},800).css({

'zIndex':'-1'

});

}

);
});

Когда мы наводим указатель мыши на пункт меню, мы добавляем класс hover элементам ссылок, заставляем уменьшенное изображение появится сверху, увеличиваем значение параметра z-index, так что уменьшенное изображение остается над ссылкой. Когда указатель мыши покидает пункт меню, мы делаем прямо противоположное, что создает эффект исчезания уменьшенного изображения за элементом ссылки. Мы увеличим продолжительность этого эффекта до 800 миллисекунд, потому что он такой забавный, что пользователю может захотеться посмотреть на него подольше!

И это все! Надеемся, Вам понравилось!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Создаем меню с уменьшенными изображениями с использованием
• Создаем выезжающий блок меню с помощью jQuery и CSS3
• Создание выезжающих блоков связанных сообщений с помощью jQuery и CSS3