Выезжающее меню с помощью jQuery
В этом уроке мы создадим уникальное выезжающее меню с помощью jQuery.
Это большое меню будет содержать название и описание каждого элемента меню. Оно будет выезжать снизу, показывая при этом иконку и текст описания. Мы будем использовать CSS3 свойства для красивых эффектов тени и jQuery для интерактивности.
Иконки для меню взяты из набора Luna Grey - http://dryicons.com/free-icons/preview/luna-grey-icons/
В исходниках их не будет, так как автор запрещает распространять их с других сайтов. Названия файлов я оставил такими же, так что Вам стоит лишь скачать иконки с того сайта.
Давайте приступим...
Разметка
Меню будет находится внутри контейнера. Меню будет состоять из неупорядоченного списка с элементами ссылок внутри. Элементы ссылок будут содержать два span: один для названия, второй для описания. У нас также будет использован элемент "i" для иконки
<div class="container">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">About</span>
<span class="description">
Learn about us and our services
</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Work</span>
<span class="description">
See our work and portfolio
</span>
</a>
</li>
<li>
<a>
<i class="icon_help"></i>
<span class="title">Help</span>
<span class="description">
Talk to our support
</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Search</span>
<span class="description">
Search our website
</span>
</a>
</li>
</ul>
</div>
Не забудьте исправить ссылки на свои.
CSS
Давайте начнем с стилей окружающего контейнера. Контейнер будет иметь относительное положение, так как само меню - абсолютное. Нам необходимо будет спрятать часть с описанием с помощью overflow:hidden.
.container{
width:900px;
height:130px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color:#fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}
Мы создаем красивые тени и закругленные углы с помощью CSS3 свойств. Помните, что они будут работать только в современных браузерах. Список будет иметь следующие стили:
.container{
width:900px;
height:130px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color:#fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}
Как Вы можете увидеть, мы прячем элемент нажатия на ссылку практически полностью. Мы делаем это с помощью отрицательно bottom позиции. Можете поиграть с этим значением и немного видоизменить меню.
Теперь давайте взглянем на классы для иконок:
.icon_about,
.icon_work,
.icon_help,
.icon_search{
width:64px;
height:64px;
display:block;
left:140px;
top:50px;
position:absolute;
}
.icon_about{
background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
background:transparent url(../images/find.png) no-repeat top left;
}
CSS для названия и описания имеют такой вид
ul#menu span.title{
display:block;
height:26px;
text-shadow:1px 1px 1px #000;
color:#B7B7B6;
text-indent:10px;
}
ul#menu span.description{
width:140px;
height:80px;
background-color:#B7B7B6;
border:3px solid #fff;
color:#fff;
display:block;
font-size:24px;
padding:10px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
Мы также хотим, чтобы 2 span меняли цвет фона и текста, так что мы также определим классы для ссылок при наведении
ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}
Вот со стилями и покончено. Давайте добавим немного красивых эффектов с помощью jQuery.
Javascript
Код Javascript будет очень простым, так как мы делаем только две вещи: выезжают элемент ссылки и иконка. Все происходит при наведении мышки.
$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});
Для того, чтобы элемент ссылки двигался мы меняем нижнюю позицию и анимируем ее. Для иконки мы изменяем значение top и даем эффекту больше времени, так как мы хотим сделать небольшую задержку.
Вот и все готово! Вышло неплохо!
Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.tympanus.net