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

Небольшой урок по созданию навигационного блока, который Вы можете использовать на своем сайте.Универсальный навигационный блок

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

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

Шаг 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.

После навигационного блока или перед закрывающимся тэгом поместите скрипт из этого файла:
Забрать фаил со скриптом для 3-го шага

Прикреплённые файлы:
Файл: code.txt
Размер: [1,75 Kb] (забрали: 5 раз)

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

Без рубрики