Эффекты на основе Java Script

Простое анимированное меню

	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
<STYLE type=text/css> /* общие параметры меню размеры, местоположение меню и т.д. / .container {LEFT: 50%; MARGIN: -200px 0px 0px -450px; OVERFLOW: hidden; WIDTH: 520px; POSITION: absolute; TOP: 50%; HEIGHT: 330px} UL#topnav {CLEAR: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 20px; WIDTH: 520px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none} UL#topnav LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; HEIGHT: 40px} / состояние меню при наведении / UL#topnav A {CLEAR: both; PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #444444; FLOAT: left; PADDING-BOTTOM: 10px; TEXT-TRANSFORM: uppercase; COLOR: #00ffff; LINE-HEIGHT: 20px; PADDING-TOP: 10px; HEIGHT: 20px; TEXT-DECORATION: none} / исходное состояние меню / UL#topnav SPAN {CLEAR: both; PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #444444; FLOAT: left; PADDING-BOTTOM: 10px; TEXT-TRANSFORM: uppercase; COLOR: #fff; LINE-HEIGHT: 20px; PADDING-TOP: 10px; HEIGHT: 20px; TEXT-DECORATION: none; DISPLAY: none} / При использовании фоновой картинки / / исходное положение / UL.v2#topnav SPAN {BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/902/a_bg.gif) repeat-x left top} / top - коричневая, bottom - белая / / при наведении / UL.v2#topnav A {BACKGROUND: url(http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/902/a_bg.gif) repeat-x left bottom; COLOR: #555} / top - коричневая, bottom - белая (красивый эффект получается если здесь поставить top) */ </STYLE> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_menu/902/jquery.js" type=text/javascript></SCRIPT> <SCRIPT type=text/javascript> $(document).ready(function() { $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag $("#topnav li").each(function() { //For each list item... var linkText = $(this).find("a").html(); //Find the text inside of the a tag $(this).find("span").show().html(linkText); //Add the text in the span tag }); $("#topnav li").hover(function() { //On hover... (при наведении курсора) $(this).find("span").stop().animate({ marginTop: "-40" //Find the span tag and move it up 40 pixels (величина скроллинга) }, 350); // скорость } , function() { //On hover out... (при снятии курсора) $(this).find("span").stop().animate({ marginTop: "0" //Move the span back to its original state (0px) ( смещение по вертикале от начального) }, 350); // скорость }); }); </SCRIPT>
Всё подписано, проблем быть не должно. Все параметры и стили меню задаются в CSS. Параметры величины скроллинга и скорость тоже выведены. Первый пример меню с фоном картинкой (class=v2).
Внутри тега <BODY> - </BODY> в любом месте.
<DIV class=container> <!-- вариант меню с фоном из картинок --> <UL class=v2 id=topnav> <LI><A href="#">Home</A> </LI> <LI><A href="#">Services</A></LI> <LI><A href="#">Portfolio</A></LI> <LI><A href="#">Blog</A> </LI> <LI><A href="#">About</A> </LI> <LI><A href="#">Contact</A> </LI></UL> <!-- вариант меню без картинок --> <UL id=topnav> <LI><A href="#">Home</A> </LI> <LI><A href="#">Services</A></LI> <LI><A href="#">Portfolio</A></LI> <LI><A href="#">Blog</A> </LI> <LI><A href="#">About</A> </LI> <LI><A href="#">Contact</A> </LI></UL> </DIV>
Здесь показано 2-а варианта меню, это для примера. Вы, естественно, установите одно, которое Вам больше приглянулось. В нём Вам надо задать названия ссылок, их адресса и, если нужно, окна в которых они будут открываться.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.