Анимированное выскальзывающее меню с использованием псевдоселекторов
В данном уроке мы разберемся как создать меню с проскальзыванием пунктов при наведении на них курсора мыши. Сделаем три варианта: с использованием псевдоклассов 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.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/OdThje_T1I8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.