Создание слайд меню с использованием псевдо-селекторов и CSS3

слайд меню css jqueryСегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то же самое без использования псевдо-селекторов, дабы пример был кроссбраузерным. И в самом конце мы заменим все новые штучки из CSS3 на старый добрый jQuery.

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

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

Что мы будем создавать?

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

Шаг 1. HTML

Наша HTML структура будет очень простой: блок div содержащий не сортированный список с тремя элементами. Элементы списка будут выглядеть не совсем обычно — каждый будет содержать не одну, а две ссылки. Посмотрите как это выглядит:



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

Шаг 2. CSS стили для меню

Для того чтобы начать работу с CSS стилями нам необходимо для начала задать основные стили для меню. Каждый пункт меню будет размером 100px в высоту и 200px в ширину и их будет три. В итоге мы получим площадку размером 100px на 600px для меню. Добавив по 10px отступа для каждого пункта меню получим в итоге 530px.

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

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

Шаг 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;
}

слайд меню css jquery
В итоге мы получаем меню, в котором каждый пункт находиться в красном прямоугольнике. Имейте ввиду, что такая разметка скроет вторые ссылки в наших пунктах меню. Чтобы увидеть их нужно удалить overflow:hidden.
слайд меню css jquery

Шаг 4. Стили для вторых ссылок

Если взглянуть на последнее изображение мы увидим, что первая и вторая не отличаются ничем кроме текста. Давайте изменим стиль вторых ссылок, дабы изменения сразу бросались в глаза. Все что нам нужно это сменить цвет блока на черный, а цвет текста на белый. Проблема заключается в том, как же все-таки получить доступ именно ко второй ссылке. В HTML коде мы не добавили ничего, что моглы бы нам получить доступ к этим ссылкам, ни классов, ни ID. Вот где мы и применим псевдо-селекторы. Для начала приведу синтаксис селектора, который мы будем использовать:

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

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

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

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

Шаг 5. Анимация эффекта при наведении

Теперь настало время создать анимацию при наведении курсора мыши на пункт меню. Нам требуется чтобы ссылка с красным фоном съезжала наверх и вместо нее появлялась ссылка с черным фоном. Звучит просто. Но не тут то было. Решение не совсем тривиальное. Дело в том, что если мы привяжем событие к верхней ссылке, то после события она уедет наверх и тут произойдет затык. Чтобы избежать этого бага мы будем обращаться ко всем элементу списка и в итоге нам будет без разницы на какую из двух ссылок наведен указатель мыши — все будет работать нормально. Вот такой код мы в итоге получим:

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

Здесь мы используем еще один псевдо-селектор :first-child, суть работы которого в том, чтобы взять первый элемент — в нашем случае первая (верхняя ссылка). Для того, чтобы сделать анимацию более плавной мы поправим стили из шага 3:

#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;
}

слайд меню css jquery

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

Вот и готова наша первая версия меню с использованием псевдо-селекторов. Псевдо-селекторы позволяют нам сделать наш CSS код чистым и легким для чтения.
слайд меню css jquery
Посмотреть демоСкачать файлы
Искал тут, кстати, знакомому квартиру в Туле. Оказалось что самый простой способ снять квартиру в Туле это зайти на сайт бесплатных объявлений tula.slando.ru.

Избавляемся от псевдо-селекторов

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

Но всегда есть но. Старые браузеры все никак не покинут нас и не избавят от лишней головной боли. Как всегда проблемы возникают в браузерах IE ниже девятой версии. Хоть мы потихоньку и избавляемся от поддержки IE6 и IE7 в наших проектах, но иногда приходиться и под них делать верстку. Давайте посмотрим как можно избавиться от псевдо-селекторов.

HTML

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



CSS

В CSS коде у нас теперь нет необходимости использовать псевдо-селекторы, поэтому мы просто назначим стили нашим классам, которые имеют универсальную поддержку:

#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 для анимации

Ну и еще одна альтернатива для свойств CSS3 — это jQuery — им мы заменим анимацию реализованную с помощью свойства transition. Для этого просто замените CSS анимацию на вот такой javascript код:

$(document).ready(function() {

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

 });

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

Вариант с использованим jQuery готов

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

Заключение

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



Запись опубликована в рубрике CSS3, JavaScript с метками , , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *