В этом уроке мы создадим уникальное выезжающее меню с помощью 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 и даем эффекту больше времени, так как мы хотим сделать небольшую задержку.

Вот и все готово! Вышло неплохо!