Сегодня мы будем разбираться с псевдо-селекторами, а заодно создадим довольно интересное слайд меню. Для начала мы создадим меню используя техники CSS3. Потом мы реализуем то же самое без использования псевдо-селекторов, дабы пример был кроссбраузерным. И в самом конце мы заменим все новые штучки из CSS3 на старый добрый jQuery.
[adsense]
Почему псевдо-селекторы?
Одна из основных целей этой статьи показать реальный пример использования псевдо-селекторов. Про псевдо-селекторы написано множество статей на различных блогах. И часто в обсуждениях задается один и тот же вопрос: «А где можно реально использовать это?» И чаще всего ответом на этот вопрос служат ссылки на какие-либо сильно оторванные от реальности примеры, которые являются не более чем новой и интересной игрушкой. И для многих это так и остается чем-то «крутым», но не применяется на практике.
Меню, которое мы сегодня создадим будет использовать псевдо-селекторы и вы на примере увидите их работу. Так что в дальнейшем вы сможете использовать их в своих проектах.
Что мы будем создавать?
Целью нашего сегодняшнего эксперимента является создание простого навигационного меню на 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;
}
В итоге мы получаем меню, в котором каждый пункт находиться в красном прямоугольнике. Имейте ввиду, что такая разметка скроет вторые ссылки в наших пунктах меню. Чтобы увидеть их нужно удалить overflow:hidden.
Шаг 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 код чистым и легким для чтения.
Посмотреть демоСкачать файлы
Искал тут, кстати, знакомому квартиру в Туле. Оказалось что самый простой способ снять квартиру в Туле это зайти на сайт бесплатных объявлений 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 — каждый решает сам.