В этом уроке мы с Вами будем учиться делать небольшой навигационный блок с интересным эффектом при наведении курсора мыши на элемент меню. Этот блок может пригодится на Вашем сайте. Вот как он выглядит:

Итак, по шагам.

Шаг 1.

Создайте основу навигации в таком формате:

<div style="padding:20px; border:1px solid #cccccc; width:150px;">
<a id='rollshift1' href="phplessons.php">AMEX</a>
<a id='rollshift2' href="phplessons.php">Газпром</a>
<a id='rollshift3' href="phplessons.php">Роснефть</a>
<a id='rollshift4' href="phplessons.php">Уралмаш</a>
<a id='rollshift5' href="phplessons.php">АвтоВАЗ</a>
<a id='rollshift6' href="phplessons.php">УралСвязьИнформ</a>
<a id='rollshift7' href="phplessons.php">Евросеть</a>
<a id='rollshift8' href="phplessons.php">Аэрофлот</a>
</div>

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

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

Шаг 2.

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

<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 - направление смещения (вправо, влево, вниз, вверх).

Шаг 3.

После навигационного блока или перед закрывающимся тэгом </body> поместите скрипт из этого файла:

Скачать фаил со скриптом для 3-го шага

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