Google-Стиль. Плавное появление навигационного меню.

Google-Стиль. Плавное появление навигационного меню.

CMS

В начале года, если мне память не изменяет (на региональных доменах обновление могло задержаться), Google обновили дизайн своей главной страницы. Одной из фишек, стало плавное появление навигационного меню сверху и нескольких ссылок в подвале, только после того, как пользователь подвигает мышкой. Это правда. Я тоже вот только в прошлом месяце это заметил. Поскольку крайне редко захожу на главную Google (запросы например делаю прямо из адресной строки). Сегодня мы научимся делать то-же самое с помощью jQuery или MooTools.

Подключаем или :

1
<script type="text/javascript" src="сайт.ру/jquery-1.4.2.min.js или mootools.js"></script>

Вызов элементов jQuery:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
	var doFadeIn = function() {
		$('.fadein').css({ opacity:0, visibility:'visible'}).fadeTo(250,1);
	};
	$('body').one('mousemove',doFadeIn);
	$('#s').one('blur',doFadeIn);
});
</script>

В четвертой строке, первые цифры «250″ в .fadeTo(250,1); – определяют скорость появления блоков. Чем выше значение, тем медленнее они появляются. Настройка доступна только при использовании jQuery.

Вызов элементов MooTools:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);
		});
	}
});
 
/* make it happen! */
window.addEvent('domready',function() {
	var fades = $$('.fadein').setStyle('opacity',0);
	var doFadeIn = function(e) {
		if(!e.key || e.key == 'tab') {
			fades.fade('in');
		}
	};
	$(document.body).oneEvent('mousemove',doFadeIn);
	$('s').oneEvent('blur',doFadeIn);
});
</script>

Для браузеров без поддержки Javascript:

1
2
3
4
5
<noscript>
	<style type="text/css">
		.fadein	{ visibility:visible; }
	</style>
</noscript>

Нужно обязательно разместить вместе с кодом вызова элементов для jQuery или MooTools. Что бы пользователи, у которых браузер в силу определенных причин не поддерживает Javascript, тоже могли увидеть содержимое блоков. Конечно в этом случае никакой анимации у них не будет.

HTML:

1
2
3
4
<div id="fade1" class="fadein">{ контент 1 }</div>
<div id="fade2" class="fadein">{ контент 2 }</div>
<div id="fade3" class="fadein">{ контент 3 }</div>
<!-- остальной контент здесь! -->

CSS:

1
2
3
4
5
6
7
8
9
@media all {
.fadein { visibility:hidden; }
#fade1 { /* размести в любой части страницы */ }
#fade2 { /* размести в любой части страницы */ }
#fade3 { /* размести в любой части страницы */ }
}
@media handheld {
.fadein { visibility:visible; }
}

Посмотреть демо »

Вот и всё. Google повержен. Тайны раскрыты. ;)

Лена Майер-Ландрут, победитель «Евровидение-2010″

На правах рекламы!
Холода потихоньку отступают, а это значит, что самое время купить . Ибо уже не сезон, и цены прилично упали. Стоит задуматься.

Facebook
Vkontakte
Neutron

Комментарии (4) к «Google-Стиль. Плавное появление навигационного меню.»

  1. Eviral1:

    довольно таки интересная фишка)) спс)

    а на счет видео: вобще никак спела)

  2. mark:

    Зато Германия евро поддержит. Потому и профит.

  3. Romb_IK:

    Полезная финтифлюшка. Сенькс!))

Оставить комментарий