Прокручивающееся меню

Прокручивающееся меню

подключаем JQery иставим в Head

Код
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>


Далее в CSS

Код
#list { text-align: center; border: 1px solid #ccc; width: 200px; overflow: auto; height: 100px; position: relative; font-size: 14px; line-height: 1.4; font-family: Georgia, Helvetica, Arial, Sans-Serif; margin: 0 auto; border-radius: 5px; box-shadow: 0px 0px 15px #ccc; } #list ul { list-style-type: none; } #list li { margin-left: -40px; } #list a { text-decoration: none; display: block; color: #000; } #mover { position: absolute; width: 100%; padding-top: 0px; height: 200px; } #list .hover { font-weight: bold; font-size: 18px; color: red; }


Код отвечающий за прокрутку

Код
<script> $(function() { $("#list").css("overflow", "hidden").wrapInner("<div id='mover' />"); var $el, speed = 9.2, cur = -1, items = $("#list a"), max = items.length - 10; items .each(function(i) { $(this).attr("data-pos", i); }) .hover(function() { $el = $(this); $el.addClass("hover"); $("#mover").css("top", -($el.data("pos") * speed - 0)); cur = $el.data("pos"); }, function() { $(this).removeClass("hover"); }); }); </script>


И само меню

Код
<div id="list"> <ul> <li><a href="#">Шаблоны</a></li> <li><a href="#">Скрипты</a></li> <li><a href="#">www.nizckod.ru</a></li> <li><a href="#">Иконки</a></li> <li><a href="#">Разное</a></li> <li><a href="#">Закладки</a></li> <li><a href="#">Склад</a></li> <li><a href="#">Помощь</a></li> <li><a href="#">Обратная связь</a></li> <li><a href="#">nizckod</a></li> <li><a href="#">Шаблоны</a></li> <li><a href="#">Скрипты</a></li> <li><a href="#">www.nizckod.ru</a></li> <li><a href="#">Иконки</a></li> <li><a href="#">Разное</a></li> <li><a href="#">Закладки</a></li> <li><a href="#">Склад</a></li> </ul> </div>
Прокручивающееся меню
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar