Сегодня я расскажу, как создать эффект затухающего меню, а также меняющегося контента при нажатии каждого из пунктов этого меню.
Шаг 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>
Не забудьте исправить пути к картинкам, если изменяли его.Конечно, Вы можете использовать в этом меню и свои картинки для обозначения пунктов меню.
Вы не можете скачивать файлы с нашего сервера
