Анимированное выскальзывающее меню с использованием псевдоселекторов

В данном уроке мы разберемся как создать меню с проскальзыванием пунктов при наведении на них курсора мыши. Сделаем  три варианта: с использованием псевдоклассов CSS3, без псевдоклассов для обеспечения лучшей поддержки браузерами, и с помощью jQuery (вариант, пригодный для работы везде).

Почему псевдоклассы?

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

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

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

Что будет сделано?

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

Достаточно простое, но эффективное меню, которое можно использовать в своих проектах.

Шаг 1: Разметка HTML

Структура кода HTML весьма проста и прозаична. Имеется простой элемент div, в котором содержится неупорядоченный список с тремя элементами. Элементы списка на первый взгляд могут показаться странными, так как каждый содержит две ссылки:

<div id="menu">
    <ul>
        <li><a href="#">Псевдоклассы</a><a href="#">Используем псевдоклассы</a></li>
        <li><a href="#">jQuery</a><a href="/jquery.html">Используем jQuery</a></li>
        <li><a href="#">Без псевдоклассов</a><a href="/NoPseudo.html">Только трансформации CSS</a></li>
    </ul>
</div>

Каждый элемент списка представляет один пункт меню. Каждый  пункт меню имеет два состояния: обычное и при наведении курсора мыши на него. Две ссылки представляют состояния пункта меню. При наведении курсора мыши на пункт меню пассивное сообщение сменяется действием.

Вот и весь код HTML. Указать каждую ссылку в пункте списка достаточно сложно без использования псевдоселекторов.

Шаг 2: Делаем CSS для меню

Сначала нужно определить стили для всего меню. Каждый пункт меню будет иметь высоту 100px и ширину 300px. Пунктов меню всего имеется три. Общая область меню будет иметь размер 100px на 900px. Добавим несколько пикселей для отступов у каждого пункта и получим в итоге размеры для меню100px на 930px.

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

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

Шаг 3: Стили для ссылок

Теперь зададим стили для ссылок. Сначала будем сдвигать все пункты списка влево и  установим для них поля. А затем зададим стиль для всех ссылок  в меню.

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

/* Стили ссылок меню */
#menu ul a {
	display: block;
	background: #e70f23; color: #fff;
	height: 100px; width: 300px;
	font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-decoration: none;
}

Каждая ссылка стала большим красным блоком.

Обратите внимание, что наши стили эффективно скрывают вторую ссылку в каждом блоке. Вторая ссылка находится прямо под первой  и просто скрыта. Для наглядности можно отключить свойство “overflow:hidden”:

Шаг 4: Изменяем стили для вторых ссылок

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

Для доступа ко вторым ссылкам нам помогут псевдоклассы, так как в коде HTML нет ни классов ни идентификаторов. Мы можем легко выбрать четные или нечетные ссылки.

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

Сначала мы указываем идентификатор меню, затем опускаемся ниже для неупорядоченного списка и указываем на тег ссылки. А затем добавляем селектор  “:nth-of-type(even)”, который выбирает только вторую ссылку в каждом наборе пункта меню.

Теперь можно задать стили для выделения второй ссылки:

/* Стили четных ссылок */
#menu ul a:nth-of-type(even) {
	background: #000;
	color: white;
	font: lighter 1.3em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

Теперь, если опять отключить свойство “overflow: hidden” можно увидеть разницу.

Шаг 5: Действия при наведении курсора мыши на пункт меню

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

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

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

В коде CSS сдвиг ссылки будет выглядеть следующим образом:

/* Сдвиг при наведении курсора мыши */
#menu ul li:hover :first-child {
	margin-top: -100px;
}

Благодаря псевдоклассам можно элегантно решить такую каверзную задачу.

Чтобы сделать плавный переход обратимся к коду шага 3 и добавим в него немного трансформаций CSS3.

/* Стили ссылок меню */
#menu ul a {
	display: block;
	background: #e70f23; color: #fff;
	height: 100px; width: 300px;
	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 для разработчика. Они поддерживаются практически в новых версиях всех основных браузерах, включая  IE9. Но более старые версии браузеров не понимают псевдоселекторов. А между тем, есть пользователи, которые  просматривают страницы даже в IE6. И разработчикам приходится беспокоиться о поддержке своих замечательных проектов.

Поэтому рассмотрим вопрос реализации нашего меню с помощью классов.

HTML

Нужно добавить дополнительный класс для указания первой ссылки без влияния на вторую в каждом пункте списка. Используем для решения класс “top”, устанавливаемый для каждой первой ссылки:

<div id="menu">
    <ul>
        <li><a href="#" class="top">Псевдоклассы</a><a href="/pseudo.html">Используем псевдоклассы</a></li>
        <li><a href="#" class="top">jQuery</a><a href="/jquery.html">Используем jQuery</a></li>
        <li><a href="#" class="top">Без псевдоклассов</a><a href="#">Только трансформации CSS</a></li>
    </ul>
</div>

CSS

Нам не нужны псевдоселекторы в данном варианте решения. Просто используем классы.

/* Стили ссылок меню */
#menu ul a.top {
	background: #e70f23;
	color: #fff;
	font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#menu ul a {
	display: block;
	background: #000; color: #fff;
	height: 100px; width: 300px;
	font: lighter 1.4em/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;
}

/* Смена при наведении курсора мыши на пункт меню */
#menu ul li:hover .top {
	margin-top: -100px;
}

Использование jQuery для анимации

В качестве альтернативы также разработаем решение с использованием jQuery (данное решение можно использовать в реальном проекте для обеспечения обратной совместимости с помощью плагина Modernizr).

Основываясь на варианте без псевдоселекторов удалим анимации CSS и подключим код jQuery:

$(document).ready(function() {

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

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

Заключение

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

• Комментарии