Главная > Меню и Навигация, Руководства > Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3

Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3


23 ноября 2011, 13:00. Разместил: Design FactoRy
Сегодня мы хотим немного позабавиться. Для начала мы разработаем анимированное меню при помощи новых удобных свойств, представленных в CSS3, по пути обучаясь использовать псевдо-селекторы на практике в реальном проекте. А затем мы расскажем вам о том, как вы можете сделать это самостоятельно без использования псевдо-селекторов, чтобы расширить круг браузеров, поддерживающих наш элемент. Наконец, мы завершим статью, наблюдая прекрасное меню, которое было создано с нуля при помощи CSS и немного jQuery.

Присоединяйтесь к нам, так как мы расскажем вам о целых трех способах разработки скользящего меню с помощью CSS!

Почему псевдо-селекторы?

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

Псевдо-селекторы часто обсуждают на многих блогах, посвященных дизайну, но когда доходит время до комментариев, в большинстве случаев можно наблюдать нечто вроде этого: «Отлично, но разве нам когда-нибудь вообще понадобится применить это?» Иногда нам нравится поэкспериментировать и создать реальные примеры того, как можно применить то или иное новшество на практике, даже если в будущем оно и не приживется.

Наше сегодняшнее меню будет основано на нескольких псевдо-селекторах, что позволит вам на будущее получить навык их применения.

Что мы сегодня разрабатываем?

Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3

Наша цель – создать простенькое навигационное меню на CSS, собранное из прямоугольных блоков на красном фоне. При наведении курсора мыши на пункт меню, будет происходить анимационный эффект, а также будет меняться цвет фона.

Примерно как открывается гаражная дверь, только все эффекты будут реализованы посредством CSS. Очень забавный эксперимент, но результат вам наверняка понравится.

Этап 1: HTML

Структура нашего HTML-кода будет очень лаконичной: div с неупорядоченным списком внутри, в котором будет всего три пункта. На первый взгляд пункты меню могут показаться немного странными – в каждом будет по две ссылки. Взгляните:

<div id="menu">
<ul>
<li><a href="#">Home</a><a href="#">See Us</a></li>
<li><a href="#">About</a><a href="#">Meet Us</a></li>
<li><a href="#">Contact</a><a href="#">Email Us</a></li>
</ul>
</div>

Каждый пункт списка будет представлять собой один пункт в навигации. Каждый пункт навигации будет иметь два разных положения: по умолчанию и при наведении. Две ссылки как раз определяют каждое положение. Не упустите из виду то, как мы изменили пассивные сообщения на призывающие к действию: About превратилось в Meet Us. Это поможет привлечь внимание.

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

Этап 2: Начальное CSS-меню

Приступая к CSS, нам понадобится немного оформить всю область меню. Каждый пункт меню будет 100 пикселей в высоту и 200 – в ширину. Всего у нас будет 3 пункта. Это в сумме даёт нам область 100х600 пикселей. Также следует добавить по 10 пикселей отступа со стороны каждого пункта, что в сумме приведет к 100х630 пикселей.

#menu {
height: 100px; width: 630px;
overflow: hidden;
margin: 50px auto;
text-align: center;
}

После того, как мы установили ширину и высоту, нам нужно центрировать меню, и скрыть то, что выступает за края. Это очень важно для навигации в дальнейшем.

Этап 3: Оформляем ссылки

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

#menu ul li {
float: left;
margin: 0 5px;
list-style-type: none;
}

/* Menu Link Styles */
#menu ul a {
display: block;
background: #ff061c; color: #fff;
height: 100px; width: 200px;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;
}

Таким образом, мы превратили каждую ссылку в большой красный блок:

Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3

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

Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3

Этап 4: Оформляем вторую ссылку

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

Самое сложное здесь заключается в том, как мы будем указывать лишь вторую ссылку. Мы ничего не внедряли в HTML, чтобы ссылки были отдельным: ни классов, ни ID, ничего. Именно здесь нам на помощь приходят псевдо-селекторы. Используя их, мы без труда сможем указать каждую ссылку посредством техники определения каждого четного или нечетного элемента.

#menu ul a:nth-of-type(even)

Данный селектор выглядит немного сложным, поэтому давайте мы немного расскажем вам о нем. Для начала мы указываем ID меню, а затем переходим к неупорядоченному списку, и к более определенным анкор-тегам в нашем списке. Далее мы применяем псевдо-селктор «:nth-of-type(even)», который будет указывать каждую вторую ссылку в нашем меню.

Теперь мы можем применить и оформление, абсолютно независимо от стиля красных блоков:

#menu ul a:nth-of-type(even) {
background: #000;
color: white;
}

Теперь же, если мы еще раз временно отключим overflow: hidden, то будет видно, что наши ссылки отличаются.

Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3

Этап 5: Скольжение при наведении

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

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

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

Вот так эти действия будут преобразованы в код:

#menu ul li:hover :first-child {
margin-top: -100px;
}

Многие люди не понимают этого, но вам не нужно работать с пунктом, к которому вы применили положение при наведении. Здесь мы запускаем событие при наведении в пункте меню, и сдвигаем первый дочерний элемент (благодаря именно псевдо-селектору) этого пункта, который в нашем случае и представляет собой первую ссылку.

Для того чтобы переход был плавным, давайте снова обратимся к коду, представленному в 3 этапе, и внесем туда небольшой переход на CSS3.

#menu ul a {
display: block;
background: #ff061c; color: #fff;
height: 100px; width: 200px;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;

-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
}

Версия с псевдо-селектором готова!

На этом наша первая версия завершена! Наша анимация выглядит отлично, а псевдо-селекторы позволяют сохранить эстетику и красоту верстки.

Разрабатываем анимированное скользящее меню с помощью псевдо-селекторов и CSS3

Демо: кликните для перехода
Скачать: кликните для того, чтобы скачать все три версии.

Обходим псевдо-селекторы

Лично нам нравится применять псевдо-селекторы, атрибутивные селекторы, и другие радости, представленные в CSS3. Тем более, что сейчас они достаточно широко и хорошо поддерживаются почти во всех современных браузерах, включая IE9!

Тем не менее, этот самый лучший в истории браузер не позволит вам спокойно жить и надеяться, что все сразу заработает, а про ранние версии IE вообще не стоит заикаться. Хотя недавно многие и отказались от IE6, нам кажется, что пройдут еще годы, прежде чем человечество откажется от IE7.

Хотя, если вы хотите использовать данный эффект в реальном проекте, то в HTML лучше обойтись классами. Давайте посмотрим, как это работает.

HTML

В облегченной версии нашего меню (без использования псевдо-классов) нам нужно будет добавить дополнительный класс для того, чтобы определить первую ссылку, не трогая при этом вторую в каждом пункте нашего меню. Здесь мы просто применяем класс «top» к каждой ссылке, которая находится сверху.

<div id="menu">
<ul>
<li><a href="#" class="top">Home</a><a href="#">See Us</a></li>
<li><a href="#" class="top">About</a><a href="#">Meet Us</a></li>
<li><a href="#" class="top">Contact</a><a href="#">Email Us</a></li>
</ul>
</div>

CSS-код

Теперь, когда мы завершили верстку, в нашем CSS нам больше не понадобятся псевдо-селекторы. Мы можем использовать классы, которые поддерживаются вообще везде.

/* Menu Link Styles */
#menu ul a.top {
background: #e70f23; color: #fff;
}

#menu ul a {
display: block;
background: #000; color: #fff;
height: 100px; width: 200px;
font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration: none;

-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
}

/* Hover Slide */
#menu ul li:hover .top {
margin-top: -100px;
}

Версия без псевдо-селекторов готова!

Наша вторая версия завершена! Данная версия отлично подойдет тем, кто избегает псевдо-селекторы.

Демо: кликните для запуска
Скачать: кликните для того, чтобы скачать все три версии.

Применяем jQuery для анимации

В третьей версии давайте постараемся выкинуть анимацию на CSS, и реализовать подобный эффект с помощью jQuery (либо хотя бы будем использовать jQuery в качестве запасного варианта с помощью Modernizr).

Разрабатывая предыдущую версию эффекта, где мы уже не использовали псевдо-селекторы, отключили анимацию на CSS, и давайте будем использовать jQuery:

$(document).ready(function() {

$("li").hover(function() {
$(this).stop().animate({ marginTop: "-100px" }, 400);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 400);
});

});

Как видно, данный код запускает эффект при наведении для пунктов меню и анимирует переход также, как мы это делали с помощью CSS. Результат будет практически идентичным, и будет работать, скорее всего, во всех браузерах. Конечно, если в них включена поддержка javascript.

Сначала у нас получилась немного веселая ситуация с повторяющейся анимацией, но потом нам напомнили о функции остановки, присутствующей в jQuery.

Версия с jQuery готова!

Вот и наша финальная версия завершена. Здесь у нас нет ни псевдо-селекторов, ни анимации на CSS. Все выполнено с помощью jQuery.

Демо: кликните для запуска
Скачать: кликните для того, чтобы скачать все три версии.

Заключение

В сегодняшнем руководстве мы рассказали о трех методах реализации красивого скользящего меню. Первая версия была реализовано при помощи псевдо-селекторов в CSS3, во второй использовалась анимация CSS, а последняя версия была основана на функционале jQuery.

Если вам понравилась наша сегодняшняя статья, пожалуйста, прокомментируйте её ниже. Также, если вы решите использовать данный эффект в своих проектах, поделитесь с другими читателями результатом!

Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад