js Меню со сдвигом пунктов на JS + вариант с PHP 

Дата публикации  Дата изменения05.02.13  КомментарииНет   Просмотры1164

Простое в установке и использовании. Настраиваемый сдвиг в четырех направлениях. В варианте с 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

  Размер:  4,22kB | Изменен:  5.02.13 | Загрузок: 32
Бесплатные курсы

Категории,

Теги: , , , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые