Добавить в избранное

Красивый навигационный блок

Дата: 2011-12-27

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

Итак

Шаг 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> поместите данный скрипт из этого файла:

Скачать

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

Просмотров: 2261

Последние 5 уроков

Как бороться со всем знакомыми багами IE

Несмотря на то что в основном пользуюn CSS3, иногда все же вынуждают бороться и с Internet Explorer при создании проектов, которые необходжимо зделать кросс-браузерными.


Красивый навигационный блок

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


Работа с cookie с помощью Jquery

Пример работы с куками на jquary + исходники статьи.


Структура DOM в случае ошибок в разметке HTML

Ошибки при построении разметки могут приводить к разному результату в разных браузерах. Конечно, исходный код будет везде одинаков, но если проверить структуру DOM с помощью инструментов разработчика, то результат будет различаться.


Видео уроки по php,jquery,ajax,css,html,сео