Универсальный навигационный блок
Универсальный навигационный блок
В этом уроке мы с Вами будем учиться делать небольшой навигационный блок с интересным эффектом при наведении курсора мыши на элемент меню. Этот блок может пригодится на Вашем сайте. Вот как он выглядит:
Итак, по шагам.
Шаг 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-го шага
На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.
В этом уроке мы с Вами будем учиться делать небольшой навигационный блок с интересным эффектом при наведении курсора мыши на элемент меню. Этот блок может пригодится на Вашем сайте. Вот как он выглядит:
Итак, по шагам.
Шаг 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-го шага
На этом процесс закончен, проверяйте результат во всех браузерах, всё должно работать как надо.