—»     —»   Как с помощью CSS3 придать изюминку в меню навигации
  Раздел: Меню и Навигация   Комментариев: 2  

Как с помощью CSS3 придать изюминку в меню навигации

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

Как с помощью CSS3 придать изюминку в меню навигации

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.


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

Каждый пункт меню (которые в данном случае являются пунктами неупорядоченного списка) будет иметь анкор, содержащий два span’а и изображение:

<ul class="mh-menu">
<li>
<a href="#">
<span>Art Director</span>
<span>Henry James</span>
</a>
<img src="images/1.jpg" alt="image01"/>
</li>
<!-- ... -->
</ul>

.mh-menu li будет обозначен параметром display:block и в качестве цвета фона мы используем rgba(255,255,255, 0.8). Когда курсор мыши будет наведен на этот пункт списка, цвет фона изменится на светло-синий rgba(225,239,240, 0.4):

.mh-menu li:hover a{
background: rgba(225,239,240, 0.4);
}

Второй span также будет изменяться в цвете при наведении, но нам нужно обозначить каждый пункт разным цветом. Итак, мы добавим цветовой переход и обозначим различные элементы селектором nth-child:

.mh-menu li a span:nth-child(2){
/*...*/
transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
color: #ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color: #c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color: #d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color: #8e7463;
}

Изображение будет скользить в правую сторону, так что изначально параметр left будет иметь значение в 0 пикселей. Мы также добавим переход к уровню плотности отображения. Он будет анимирован с 0 значения к 1:

.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.mh-menu li:hover img{
left: 300px;
opacity: 1;
}

И, вуаля! Наш эффект уже готов!

Убедитесь, что в параметре z-index у анкоров установлено значение выше, чем у изображения, чтобы изображение скользило под анкорами, а не над ними.

С другой стороны, мы можем сделать так, чтобы цвет фона у анкора становился прозрачным при наведении, то есть полностью белым (смотрите демо 2), либо раскрасить каждый дочерний элемент разными цветами (смотрите демо 3).

Иллюстрации в демо были любезно представлены Бартошем Косовски (Bartosz Kosowski), и распространяются они под лицензионным соглашением CC BY-NC 3.0.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 9329   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 апреля 2012 @ 16:15
Написал: bass777 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
в ие8 глюки:

демо1 - видно слева последнее фото
демо2 - виден белый бекграунд

как решить эту проблему?
Комментарий #2: 19 апреля 2012 @ 16:33
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
bass777, никак. CSS3 transitions не поддерживаются в IE8.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031