В сегодняшнем уроке я хочу показать Вам как создать меню в стиле Apple.
Верхняя часть меню похожа на меню эппла, но при наведении на него мышкой появляются красивые иконки. Иконки выезжают сверху, и когда пользователь убирает мышку, они заезжают обратно.
Иконки, которые используются в уроке бесплатные, но распространять их с других сайтов нельзя. Поэтому в исходниках их Вы не найдете. Найти их можно тут.
Давайте начнем наш урок!
HTML
Разметка очень простая и состоит из неупорядоченного списка. Элементы списка содержат <span> для иконки и ссылку.
<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="" class="first">Players</a></li>
<li><span class="video_camera"></span><a href="">Cameras</a></li>
<li><span class="television"></span><a href="">TVs</a></li>
<li><span class="monitor"></span><a href="">Screens</a></li>
<li><span class="toolbox"></span><a href="">Tools</a></li>
<li><span class="telephone"></span><a href="">Phones</a></li>
<li><span class="print"></span><a href="" class="last">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;
}
Поскольку мы придаем нашему списку свойство float, нам понадобится дополнительный слой для иконок. Иконки, которые в свою очередь являются фоновым изображением в <span> будут иметь абсолютное позиционирование. Это удобно, когда необходимо задать 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;
}
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(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../icons/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
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;
}
Как Вы видите мы позиционируем все иконки таким образом, чтобы они находились по центру элемента списка.
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 миллисекунд, чтобы пользователь мог насладится красотой данного эффекта.
Вот и все готово! Пользуйтесь!