Плавная смена фона

25 июня 2010 года
JavaScript
  • Содержание

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

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

А теперь заставим меняться фоновое изображение плавно. К каждому пункту меню добавим новый элемент strong (можно выбрать другой неблочный: span, i и т.д.). Он будет отвечать за активное состояние пункта меню, в то время как ссылка a - за неактивное.

<ul>
	<li>
		<a href="#"><strong>Контакты</strong></a>
	</li>
	...
</ul>

Плавный эффект достигается за счет того, что меняется прозрачность вложенного элемента, в моем случае strong: strong невидим - меню не активно.

Вот так выглядит реализация меню на jQuery:

$('#menu a').hover(function() {
	$(this).children('strong').stop().fadeTo(500, 1);
}, function () {
	$(this).children('strong').stop().fadeTo(500, 0);
}).children('strong').empty().css('opacity', 0);

И то же самое, используя Mootools:

$$($$('#menu a').addEvents({
	'mouseover': function(){
		this.getChildren('strong').fade('in');
	},
	'mouseout': function(){
		this.getChildren('strong').fade('out');
	}
}).getChildren('strong')).fade('hide').set('html', '');

Ниже ссылки с примерами:
CSS меню: смотреть, скачать
jQuery меню смотреть, скачать
Mootools меню смотреть, скачать

Понравилась статья? Подпишись на RSS.

Советую почитать:

Скрытые возможности jQuery (часть 2)
jQuery Slidermenu с ползунком
Многоуровневое выпадающее меню
Slidemenu и Mootools

Теги: скорость смена фона при наведении в css, смена фона css, css плавная подсветка меню, jquery плавная смена фона, gkfdyfz cvtyf ajyf

Checkbox в паре со скрытым элементом Подсветка кода с Lighter.js

Комментарии

  • Mak написал 25 июня 2010 года

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

    Ответить
  • Александр написал 25 июня 2010 года

    Спасибо за замечание.
    Действительно, в данном случае можно обойтись без лишнего элемента. Добавил новые примеры для jQuery и Mootools.

    Ответить
  • Атем написал 02 августа 2010 года

    спасибо огрномное!!!
    очень понравилось!!

    Ответить
  • Goodwin написал 04 января 2011 года

    Здравствуйте, Александр,
    спасибо за интересный рецепт.
    Вообще сайт очень понравился.

    Ответить
  • sap написал 19 декабря 2011 года

    Поскольку в примере работы я особой плановти не замети то это можно это делать на чистом CSS, вот так:

    #Menu  a {
 background-image: url(../i/15_03.gif);
 background-repeat: no-repeat;
 background-position: 0px -30px;
        display: block;
}

#Menu  a:hover {
 background-repeat: no-repeat;
 background-position: 0px 0px;
}

    Если используется конкретный пункт меню то:

    #Menu  a.class {
 background-image: url(../i/15_03.gif);
 background-repeat: no-repeat;
 background-position: 0px -30px;
        display: block;
}

#Menu  a.class:hover {
 background-repeat: no-repeat;
 background-position: 0px 0px;
}
    Ответить