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

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

Хотя этот урок относится к предыдущему, мы начнем с основ, чтобы все было понятно и тем читателям, которые заинтересованы только в новом меню.

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

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

Структура html

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

<ul id="navigation">

<li><a href=""><span>Home</span></a></li>

<li><a href=""><span>About</span></a></li>

<li><a href=""><span>Search</span></a></li>

<li><a href=""><span>Photos</span></a></li>

<li><a href=""><span>Rss Feed</span></a></li>

<li><a href=""><span>Podcasts</span></a></li>

<li><a href=""><span>Contact</span></a></li>
</ul>

Теги span будут содержать название пунктов нашего меню.

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

CSS

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

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 10px;

list-style: none;

z-index:999999;

width:721px;
}

Мы располагаем список в верхнем правом углу страницы.

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

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

ul#navigation li {

width: 103px;

display:inline;

float:left;
}

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

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

ul#navigation li a {

display: block;

float: left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color: #E7F2F9;

background-repeat: no-repeat;

background-position: 50% 10px;

border: 1px solid #BDDCEF;

text-decoration: none;

text-align: center;

padding-top: 80px;
}

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

Давайте добавим элементам слегка скругленные углы, которые, к сожалению, не будут работать в браузере Internet Explorer, и сделаем их полупрозрачными:

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#E7F2F9;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

text-decoration:none;

text-align:center;

padding-top:80px;

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

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

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

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

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

opacity: 0.7;

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

Последнее свойство фильтра заставит это все работать также в браузере 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);
}

Когда мы наводим указатель мыши на элементы, мы хотим изменить цвет их фона, чтобы они  больше выделялись:

ul#navigation li a:hover{

background-color:#CAE3F2;
}

Теперь нам нужно добавить определение стилей к тегам span:

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

text-shadow: 0 -1px 1px #fff;
}

Свойство тени текста придаст буквам эффект гравировки, но оно не будет работать в браузере Internet Explorer.

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

JavaScript

С помощью jQuery мы заставим элементы сначала исчезать один за другим, до тех пор пока видимым не останется только текст. Когда мы наводим указатель мыши на один из элементов, весь элемент выедет сверху. Для всего этого мы напишем следующий код:

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

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

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);
});

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

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

И это все! Надеемся, Вам понравился этот урок!

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

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

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

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

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