Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем выезжающее меню с использованием CSS и jQuery

30 декабря 2013 | Опубликовано в css | 10 Комментариев »

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

 

 

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

Уменьшенные изображения, которые мы будем использовать, взяты из наборов цветных наклеек 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

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

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




Комментарии

  1. Виталий
    Thumb up Thumb down 0

    На реальном сайте это меню большинство и не найдет-то).

    Ответить

  2. Ром
    Thumb up Thumb down 0

    большинство подобных фичей совершенно не юзабильно. К примеру такую навигацию среднестатистический пользователь тупо не найдёт... и сайт сдохнет.

    Ответить

  3. ZHARIK
    Thumb up Thumb down 0

    Ну его можно использовать как дополнительная фишка к основному меню

    Ответить

  4. ZHARIK
    Thumb up Thumb down 0

    Ну можно же его использовать как фишка к основному меню

    Ответить

  5. Кирилл
    Thumb up Thumb down -1

    Переведите этот урок еще пожалуйста!

    tympanus.net/codrops/2013...awing-animation/

    Ответить

  6. max
    Thumb up Thumb down +3

    Это можно сделать НАМНОГО проще, и без jquery, на чистом css. Чем проще и меньше код, тем лучше (если он решает задачу). Дислайк вам.

    Ответить

  7. Illorian
    Thumb up Thumb down 0

    Уважаемый, прочитай про анимацию на css. Лучше бы ты вообще нормально изучил css, потому что этот как-то даже непотребно читать такой код.

    Ответить

  8. Алексей
    Thumb up Thumb down 0

    Я в 2009 году точно такое же меню прикручивал на свой сайт. Поздновато вы

    Ответить

Оставить ответ


4 + семь =

Вставить изображение