В данном уроке мы создадим интересное выскальзывающее меню. Идея заключается в том, что прямоугольник с пунктом меню при выборе выскальзывает вниз, а миниатюра выскакивает наверх. В меню есть также прямоугольник для подменю, которое имеется у некоторых пунктов меню. Подменю будет выскальзывать влево или вправо в зависимости от того, какой пункт меню выбран.
Разметка
Для HTML структуры используется неупорядоченный список, который содержит в качестве пунктов ссылку на основной пункт и элемент div для подменю:
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Портфолио</span>
<span class="sdt_descr">Мои работы</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Веб сайты</a>
<a href="#">Иллюстрации</a>
<a href="#">Фотографии</a>
</div>
</li>
...
</ul>
Если подменю нет, то элемент div можно просто опустить. Изображение сначала не будет выводиться, так как мы установим для него ширину и высоту равной 0 в CSS.
CSS
Начнем задавать стили для неупорядоченного списка:
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1140px;
}
Также мы сбросим свойства text-decoration и outline для всех ссылок в нашем меню:
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
Пункт списка будет смещаться влево и позиционироваться относительно, так как элементы внутри него будут позиционироваться абсолютно. Если этого не сделать, то абсолютно позиционированные элементы будут использовать координаты относительно всей страницы:
ul.sdt_menu li{
float:left;
width:190px;
height:85px;
position:relative;
cursor:pointer;
}
Стиль для основного элемента ссылки, в котором имеются два элемента span для заголовка и описания:
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:190px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
Обратите внимание на свойство z-index: мы будем определять порядок расположения всех важных элементов, поэтому нужный всегда будет оставаться наверху.
Мы используем фоновое изображение, которое создает эффект стекла с помощью полупрозрачного градиента. При использовании какой-нибудь текстуры для фона получается отличный эффект. Попробуйте использовать различные текстуры!
Также можно изменять тени – установка значений 2px 2px 6px #000 inset создает прелестный эффект.
Изображения будут иметь следующие стили:
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
Мы будем анимировать изображения так, как будто они появляются снизу, поэтому они позиционируются абсолютно с использованием свойства “bottom” в качестве исходной точки. Также используются тени. Первые два значения 0 устанавливают равномерное распределение тени вокруг изображения. Мы используем такие тени в элементе ссылки. Такое распределение тени можно применять тогда, когда нужно организовать светлую границу. При этом не нужно беспокоиться о вычислении высоты и ширины элемента. Недостаток такого использования тени заключается в том, что CSS3 не поддерживается в IE.
Контейнер для элементов span заголовка и описания будет иметь следующий стиль:
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:190px;
height:60px;
z-index:15;
}
Если вы будете использовать более длинный текст, вам надо адаптировать данные значения. Также нужно скорректировать значения в анимации JavaScript.
Определим стили для серого прямоугольника, который будет выскальзывать вниз. Установим для него высоту 0 и будем позиционировать его таким образом, чтобы нужно было только увеличивать высоту при анимации.
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:190px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
Стили для элементов span и ссылок в прямоугольниках:
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
Заголовок и описание будут иметь следующие стили:
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*Для тупого IE7*/
font-size:10px;
letter-spacing:1px;
}
Прямоугольник подменю изначально скрыт под серым прямоугольником. Затем, мы анимируем его выдвижение вправо или влево в зависимости от расположения пункта меню. Если мы поместим курсор на последний пункт меню, то подменю будет выдвигаться влево, а во всех остальных случаях выдвижение будет проводиться вправо.
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:190px;
overflow:hidden;
height:190px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
Первая ссылка в подменю должна иметь отступ сверху:
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
JavaScript
Когда курсор мыши заходит на элемент списка, мы увеличиваем изображение и выводим оба элемента span sdt_active и sdt_wrap. Если элемент имеет подменю (sdt_box), то его надо выдвинуть. Если элемент последний в списке, то подменю будет выдвигаться влево, а в остальных случаях вправо:
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'190px',
'height':'190px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'190px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '190px';
if($elem.parent().children().length == $elem.index()+1)
left = '-190px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
Готово!