Простая прокрутка для списка

простая прокрутка списка
Привет, друзья. Для более компактного размещения длинных списков хорошо подойдёт обычная прокрутка. Сегодня хочу предложить вам такой вариант прокрутки списка. Так можно оформить ссылки на ваши любимые блоги или на какие - то посты опубликованные у вас. Может быть вы сами ещё что - нибудь придумаете.
Я публиковала раньше пост, как можно оформить ссылки в виде вертикально бегущих строк, что тоже экономит место в сайдбаре.  Об этом можно прочитать здесь.

То, что предлагаю вам сегодня можно посмотреть на тестовом блоге в боковой колонке.


Код совершенно простой. Устанавливается в гаджет HTML/JavaScript. Скопируйте его пока в блокнот и ниже разберём, что к чему.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<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>
<style>#spisok {
text-align:center;
border: 1px solid #ccc; <!-- толщина и цвет рамки -->
width: 220px;
overflow: auto;
height: 160px; <!-- высота блока списка -->
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 10px #ccc;
}
#spisok ul {
spisok-style-type: none;
}
#spisok li {
margin-left: -40px;
}
#spisok a {
text-decoration: none;
display: block;
color: #000;
}
#mover {
position: absolute;
width: 100%;
padding-top: 0px;
height: 360px; <!--ширина блока списка  -->
}
#spisok .hover {
font-weight: bold;
font-size: 16px; <!-- размер шрифта при наведении курсора -->
color: #FF8400; <!-- цвет шрифта при наведении -->
}
</style>


<div id="spisok">
<ul>
<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="#">ещё</a></li>
<li><a href="#">ещё</a></li>
<li><a href="#">ещё</a></li>
<li><a href="#">ещё</a></li>

</ul>
</div>


Первая строка, которую я отметила красным цветом, это скрипт библиотеки jquery. Если вам интересно, прочитайте в этом сообщении, что это такое. Если по каким - то причинам у вас не будет список корректно отображаться, просто уберите её. Вероятно, она уже установлена в блоге.

Вместо решёток указывайте адреса страниц, куда должна вести ссылка. Вписывайте ваши названия, в строки отмеченные синим цветом. Можно добавлять сколько угодно пунктов использую строку

<li><a href="#">ещё</a></li>

Почти все стили оформления блока прокрутки списка я прописала в коде CSS.

Как сделать прокрутку для длинного списка ярлыков прочитайте здесь.

Сегодня у меня всё. Всем удачи и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


0 коммент.:

Отправить комментарий

Пользовательский поиск
Foto Saya
My Photo