Проверено

VDS-хостинг - именно на этом хостинге работает наш сайт.
Sape - биржа временных ссылок, доход 80р/день.
Trustlink - биржа временных ссылок, доход 60р/день.
Telderi - здесь покупаю сайты для дальнейшего заработка.

Партнеры

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

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

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



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

Шаг 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 раз)


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

Другие новости по теме: