В данной статье будет показано, как создать выдвижное меню с помощью Jquery. Меню будет состоять из нескольких разделов, у которых будет название и описание. Название раздела меню будет выдвигаться вверх при наведении курсора, вытягивая за собой описание и иконку. С помощью CSS3-свойств будет создан эффект затенения, а с помощью Jquery – добавлено взаимодействие с пользователем.

Разметка.

Меню будет расположено внутри контейнера. Оно представляет собой неупорядоченный список, внутри которого содержатся LINK-элементы. LINK-элементы будут содержать два текстовых элемента 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>

Также измените LINK на тот, который вам нужен и добавьте «href».

<р3>CSS стили.

Начнем с оформления контейнера. К нему будет применено свойство position со значением relative, так как к меню будет применено свойство position со значением absolute. Нам будет нужно скрыть описательную часть к разделам меню, поэтому придется скрывать все, что выходит за границу контейнера. Если применить абсолютное позиционирование к меню на странице, т.е. расположить внизу, описательная часть к элементам меню будет выходить за пределы окна. Написанный ниже код позволит сделать позиционирование меню относительным по отношению к другим элементам:

.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-свойств. Это работает практически во всех браузерах, за исключением IE.

Стиль списка определяется с помощью следующего кода:

ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:20px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:210px;
}

Название раздела меню не до конца «придавливает» span’ы с описанием и иконками. Это происходит за счет задания определенного отрицательного значения для position:bottom. Можно изменить данное значение таким образом, что span’ы будут показаны больше или не показаны вовсе.

Классы иконок:

.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;
}

Сделаем там, что в данных span’ах будет изменяться цвет текста и фона. Для этого определим изменения стиля родительского LINK-элемента при наведении на него курсора:

ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}

Javascript

Скрипт будет простым и понятным, потому что нужно всего лишь выдвинуть LINK-элемент и иконку. Код выполняется при наведении/убирании курсора на раздел меню:

$(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);
        }
    );
});

Для выдвижения LINK-элемента изменяем значение позиции bottom и применяем animate. Для выдвижения иконки изменяем значение позиции top и тоже применяем animate. Чтобы она появилась позже, увеличиваем значение параметра «duration».