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

Демонстрация работы – Скачать исходный код

Уменьшенные изображения, которые мы будем использовать, взяты из наборов цветных наклеек 1, 2, 3 и 4, созданных DryIcons. Их не разрешено распространять под свободной лицензией, так что мы не можем включить их в исходный код для этого урока.

Итак, давайте приступим к работе.

Структура html

Единственное, что нам нужно для этого меню, — это простой ненумерованный список с ссылками внутри элементов списка:

<ul id="navigation">

<li><a title="Home"></a></li>

<li><a title="About"></a></li>

<li><a title="Search"></a></li>

<li><a title="Photos"></a></li>

<li><a title="Rss Feed"></a></li>

<li><a title="Podcasts"></a></li>

<li><a title="Contact"></a></li>
</ul>

Мы присваиваем списку идентификатор, потому что мы хотим сослаться на него позднее в JavaScript. С помощью jQuery мы заставим ссылочные элементы выезжать, когда мы наводим указатель мыши на элементы списка.

CSS

Сначала мы определим свойства CSS для этого списка:

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 10px;

left: 0px;

list-style: none;

z-index:9999;
}

Меню должно быть всегда доступно для пользователя, даже если он прокручивает страницу до самого низа. Так что положение должно быть зафиксированным. Внешние и внутренние отступы установлены в 0, так как у ненумерованного списка есть для них значения по умолчанию. Меню также должно быть выше всех других элементов на странице. Поэтому мы устанавливаем значение z-index очень высоким.

Теперь давайте рассмотрим свойства элементов списка:

ul#navigation li {

width: 100px;
}

Для ссылок в этих элементах списка мы определим следующие свойства CSS:

ul#navigation li a {

display: block;

margin-left: -85px;

width: 100px;

height: 70px;

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;
}

У внешнего левого отступа установлено отрицательное значение, так как мы хотим спрятать большую часть уменьшенных изображений и показать их, только когда мы наведем указатель мыши на элемент списка. Мы изначально выталкиваем ссылочные элементы влево, за пределы видимой области страницы:

В JavaScript мы определим функцию, которая заставит элементы выезжать. Но сначала давайте добавим им слегка скругленные углы, которые, к сожалению, не будут работать в браузере Internet Explorer:

ul#navigation li a {

display: block;

margin-left: -85px;

width: 100px;

height: 70px;

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;
}

Чтобы сделать их очень аккуратными, мы добавим прозрачности, так что то, что находится под ними, будет видимым.

ul#navigation li a {

display: block;

margin-left: -85px;

width: 100px;

height: 70px;

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

opacity: 0.6;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

Последнее свойство фильтра заставит это все работать также в браузере Internet Explorer.

Это были общие свойства всех ссылочных элементов в списке. Сейчас мы определим фоновые изображения для ссылок в определенных элементах списка:

ul#navigation .home a{

background-image: url(../images/home.png);

}

ul#navigation .about a      {

background-image: url(../images/id_card.png);

}

ul#navigation .search a      {

background-image: url(../images/search.png);

}

ul#navigation .podcasts a      {

background-image: url(../images/ipod.png);

}

ul#navigation .rssfeed a   {

background-image: url(../images/rss.png);

}

ul#navigation .photos a     {

background-image: url(../images/camera.png);

}

ul#navigation .contact a    {

background-image: url(../images/mail.png);
}

Это все, что касается CSS. Теперь давайте рассмотрим код JavaScript, который оживит меню.

JavaScript

Мы заставим иконки появляться с помощью jQuery, когда мы наводим указатель мыши на один из элементов списка. Запомните, что сам элемент списка имеет ширину 100 пикселей, но ссылочный элемент выталкивается влево, за пределы видимой области страницы, так что он невидим.

Мы определим следующую функцию до конца тега body, которая будет выполняться каждый раз, когда мы наводим указатель мыши на элемент списка:

$(function() {

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

},

function () {

$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);

}

);
});

Когда мы наводим указатель мыши, мы хотим, чтобы определенный ссылочный элемент получил значение левого внешнего отступа -2 пикселя, и чтобы это было красиво анимировано, и происходило не слишком медленно, 200 миллисекунд. Отодвигание указателя мыши должно вернуть ссылочный элемент назад на его старое место, на -85 пикселей. Функция остановки остановит все выполняемые на данный момент анимации на всех выбранных элементах, что даст нам красивый эффект, когда, например, мы проводим указатель мыши надо всеми элементами очень быстро.

Так же будет очень мило предупредить пользователя о том, что на Вашем сайте есть такое замечательное меню. В нынешнем состоянии пользователь едва увидит серые границы, высовывающиеся из левого края страницы. Так что мы покажем меню ненадолго, когда страница загружается. Итак, вот как мы это сделаем.

Мы изначально позволим меню быть видимым. Для этого мы изменим значение левого внешнего отступа для ссылочных элементов:

ul#navigation li a {

display: block;

margin-left: -2px;

width: 100px;

height: 70px;

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

opacity: 0.6;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

И мы добавим следующий код в начало функции JavaScript:

$(function() {

$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

},

function () {

$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);

}

);
});

С помощью этого кода мы определили, что изменение значения левого внешнего отступа на -85 пикселей для всех ссылочных элементов должно занять 1 секунду. С помощью изменения значения этого отступа мы покажем пользователю меню, которое потом спрячем с помощью JavaScript.

И это все!

Если Вам нравятся тени, Вы также можете добавить этот код к свойствам ссылочного элемента:

ul#navigation li a {

display: block;

margin-left: -2px;

width: 100px;

height: 70px;

background-color:#CFCFCF;

background-repeat:no-repeat;

background-position:center center;

border:1px solid #AFAFAF;

-moz-border-radius:0px 10px 10px 0px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-top-right-radius: 10px;

-moz-box-shadow: 0px 4px 3px #000;

-webkit-box-shadow: 0px 4px 3px #000;
}

Добавление тени блока и прозрачности создаст иллюзию объема у элементов меню. Если оставить их полупрозрачными, это тоже будет выглядеть отлично, попробуйте и наслаждайтесь!

Вы также можете посмотреть альтернативную версию этого урока на английском языке здесь. Его перевод будет выложен в ближайшее время.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

• Создаем стильное плоское меню при помощи CSS
• Создаем меню со случайным поворотом пунктов с помощью jQuery и CSS3
• Многоуровневое меню