05.02.13 
3674 
Простое в установке и использовании. Настраиваемый сдвиг в четырех направлениях. В варианте с PHP добавлена подсветка активного пункта.
Пример использования:
Между <head></head>:
<script type="text/javascript">
rs_distance = 15 //на сколько пискселей сдвиг
rs_animation_step_size = 1 //шаг сдвига (плавность по пиксельно: 1 – самый гладкий)
rs_animation_delay = 15 //задержка сдвига
rs_direction = "right" //left, right, up, down – направление сдвига
</script>
После <body>:
<div style="padding:20px; border:1px solid green; width:100px;margin:50px auto">
<a id='rollshift1' href="#">Первый пункт</a>
<a id='rollshift2' href="#">Второй пункт</a>
<a id='rollshift3' href="#">Третий пункт</a>
</div>
Перед </body>:
<script type="text/javascript" src="left_menu_go.js"></script>
Пункты добавляются нумерацией rollshift последовательно (4, 5, 6 и т.д.); количество неограниченно.
Вариант с PHP
Добавляем подсветку активного пункта (убираем первый блок меню и вставляем после <body> этот) :
<div style="padding:20px; border:1px solid green; width:100px;margin:50px auto">
<?php
if ($_SERVER['REQUEST_URI'] == '/example/js/menu_shift_js/index1.php' )
{ echo "<a id='rollshift1' style=\"color:red\" href='/example/js/menu_shift_js/index1.php' >Первый пункт</a>";
}
else {
echo "<a id='rollshift1' href='/example/js/menu_shift_js/index1.php'>Первый пункт</a>";}
if ($_SERVER['REQUEST_URI'] == '/example/js/menu_shift_js/index2.php' )
{ echo "<a id='rollshift2' style=\"color:red\" href='/example/js/menu_shift_js/index2.php' >Второй пункт</a>";
}
else {
echo "<a id='rollshift2' href='/example/js/menu_shift_js/index2.php'>Второй пункт</a>";}
if ($_SERVER['REQUEST_URI'] == '/example/js/menu_shift_js/index3.php' )
{ echo "<a id='rollshift3' style=\"color:red\" href='/example/js/menu_shift_js/index3.php' >Третий пункт</a>";
}
else {
echo "<a id='rollshift3' href='/example/js/menu_shift_js/index3.php'>Третий пункт</a>";}
?>
</div>
Смотреть пример – первый вариант, чистый JS
Смотреть пример – второй вариант, с PHP
Нет комментариев к этой статье.