Затухающее меню с меняющимся контентом

Сегодня я расскажу, как создать эффект затухающего меню, а также меняющегося контента при нажатии каждого из пунктов этого меню.

Шаг 1.

Подключим файл CSS-стилей и фреймворк jQuery к документу, прописав следующий код между тегами <head>:

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>

Шаг 2.

Далее пропишем следующий скрипт:

<script type="text/javascript">
		$(function(){
					$("#about-button").css({
				opacity: 0.3
			});
			$("#contact-button").css({
				opacity: 0.3
			});
		            $("#page-wrap div.button").click(function(){
            	            	$clicked = $(this);
            	                       	if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
            		            		$clicked.animate({
            			opacity: 1,
            			borderWidth: 5
            		}, 600 );
            		var idToLoad = $clicked.attr("id").split('-');
            		$("#content").find("div:visible").fadeOut("fast", function(){
            			$(this).parent().find("#"+idToLoad[0]).fadeIn();
            		})
            	}
            	$clicked.siblings(".button").animate({
            		opacity: 0.5,
            		borderWidth: 1
            	}, 600 );
            });
		});
	</script>

Шаг 3.

Вставим код меню и затем еще код соответствующего каждому пункту контента:

<div id="page-wrap">

<div id="home-button" class="button">

<img src="menu-hom.png" alt="home" class="button" />

</div>

<div id="about-button" class="button">

<img src="menu-abo.png" alt="about" class="button">

</div>

<div id="contact-button" class="button">

<img src="menu-con.png" alt="contact" class="button">

</div>

<div class="clear"></div>

<div id="content">

<div id="home">

<p>Содержание для пункта home</p>

</div>

<div id="about">

<p>Содержание для пункта about</p>

</div>

<div id="contact">

<p>Это содержание для пункта contact</p>

</div>

</div>

</div>

Не забудьте исправить пути к картинкам, если изменяли его.

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

Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Сергей Патин
Урок создан: 20 Мая 2009
Просмотров: 57962
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^