Универсальный навигационный блок

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

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

Шаг 1.

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

 <div style="padding:20px; border:1px solid #cccccc; width:150px;"> 

<a id='rollshift1' href="sample_link.html">AMEX</a>

<a id='rollshift2' href="sample_link.html">Газпром</a>

<a id='rollshift3' href="sample_link.html">Роснефть</a>

<a id='rollshift4' href="sample_link.html">Уралмаш</a>

<a id='rollshift5' href="sample_link.html">АвтоВАЗ</a>

<a id='rollshift6' href="sample_link.html">УралСвязьИнформ</a>

<a id='rollshift7' href="sample_link.html">Евросеть</a>

<a id='rollshift8' href="sample_link.html">Аэрофлот</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-го шага

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

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

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

^ Наверх ^