Мы с Вами будем учиться делать небольшой навигационный блок с интересным эффектом при наведении курсора мыши на элемент меню.
Создайте основу навигации в таком формате:
<div style="padding:20px; border:1px solid #cccccc; width:150px;">

<a id='rollshift1' href="адрес">Ссылка1</a>

<a id='rollshift2' href="адрес">Ссылка2</a>

<a id='rollshift3' href="адрес">Ссылка3</a>

<a id='rollshift4' href="адрес">Ссылка4</a>

<a id='rollshift5' href="адрес">Ссылка5</a>

<a id='rollshift6' href="адрес">Ссылка6</a>

<a id='rollshift7' href="адрес">Ссылка7</a>

<a id='rollshift8' href="адрес">Ссылка8</a>

</div>

Если у Вас будет больше пунктов в меню, то продолжайте их создавать, только атрибуту id присваивайте следующие по порядку номера id='rollshift9', id='rollshift10' и т.д.

Поместите этот код в то место страницы, где Вы хотели бы видеть свой навигационный блок.

Перед этим кодом вставьте следующий скрипт:

Код:
<script language="JavaScript">

  rs_distance = 12

  rs_animation_step_size = 1

  rs_animation_delay = 15

  rs_direction = "right"	//left, right, up, down

  </script>

Здесь Вы можете регулировать следующие параметры:

rs_distance - на сколько пикселей будет смещение текста при наведении курсора мыши.

rs_animation_delay - время задержки смещения в мс.

rs_direction - направление смещения (вправо, влево, вниз, вверх).

Также вставляем и этот скрипт:

Код:
<script language="JavaScript">ulm_mac=navigator.userAgent.indexOf("Mac")+1;ulm_ie=window.showHelp;var rtgl=new Object();var ri=1;rt_init();;function rt_init(){if(!(ulm_mac&&ulm_ie)){ri=1;while(cy4=document.getElementById("rollshift"+ri)){cy0=0;cy1=cy4.offsetHeight;cy2=0;cy3=0;var sd='<div isrs='+ri+' style="position:absolute;"><div style="position:absolute;z-index:2;cursor:pointer;cursor:hand;"><div onmouseout="cy6('+ri+')" onmouseover="cy5('+ri+',this)" style="position:relative;"></div></div><div style="position:relative;">';sd+=cy4.innerHTML+'</div></div>';sd+='<div style="visibility:hidden;">'+cy4.innerHTML+'</div>';cy4.innerHTML=sd;if(rs_direction=="left")cy2=-rs_distance;if(rs_direction=="up")cy3=-rs_distance;if(rs_direction=="left"||rs_direction=="right")cy0=rs_distance;else cy1+=rs_distance;(rif=(r1if=cy4.firstChild).firstChild.firstChild).style.left=cy2+"px";rif.style.top=cy3+"px";rif.style.width=(r1if.lastChild.offsetWidth+cy0)+"px";rif.style.height=cy1+"px";if(ulm_ie){rif.style.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity=0);";rif.style.backgroundColor="#00ff00";}rtgl['xpos'+ri]=0;ri++;}}};function cy5(id,sobj){rtgl['ani_obj'+id]=sobj.parentNode.parentNode.lastChild;rtgl['expand'+id]=1;clearTimeout(rtgl['timer'+id]);cy7(id);};function cy6(id){rtgl['expand'+id]=false;clearTimeout(rtgl['timer'+id]);cy7(id);};function cy7(id){if(rtgl['expand'+id])rtgl['xpos'+id]+=rs_animation_step_size;else rtgl['xpos'+id] -=rs_animation_step_size;cy8=rtgl['xpos'+id];stn="top";movep=cy8;if(rs_direction=="left"||rs_direction=="right"){if(rs_direction=="left")movep=-movep;stn="left";}else  if(rs_direction=="up")movep=- movep;if(cy8<rs_distance&&cy8>=0){rtgl['ani_obj'+id].style[stn]=movep+"px";rtgl['timer'+id]=setTimeout("cy7("+id+")",rs_animation_delay);}}</script>

На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.

Данный урок подготовлен для Вас командой сайта ruseller.com
Источник урока: wwwopencube.com
Перевел: Евгений Попов
Урок создан: 22 Сентября 2008