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