Привет, друзья. Для более компактного размещения длинных списков хорошо подойдёт обычная прокрутка. Сегодня хочу предложить вам такой вариант прокрутки списка. Так можно оформить ссылки на ваши любимые блоги или на какие - то посты опубликованные у вас. Может быть вы сами ещё что - нибудь придумаете.
Я публиковала раньше пост, как можно оформить ссылки в виде вертикально бегущих строк, что тоже экономит место в сайдбаре. Об этом можно прочитать здесь.
То, что предлагаю вам сегодня можно посмотреть на тестовом блоге в боковой колонке.
Код совершенно простой. Устанавливается в гаджет HTML/JavaScript. Скопируйте его пока в блокнот и ниже разберём, что к чему.
Первая строка, которую я отметила красным цветом, это скрипт библиотеки jquery. Если вам интересно, прочитайте в этом сообщении, что это такое. Если по каким - то причинам у вас не будет список корректно отображаться, просто уберите её. Вероятно, она уже установлена в блоге.
Вместо решёток указывайте адреса страниц, куда должна вести ссылка. Вписывайте ваши названия, в строки отмеченные синим цветом. Можно добавлять сколько угодно пунктов использую строку
<li><a href="#">ещё</a></li>
Почти все стили оформления блока прокрутки списка я прописала в коде CSS.
Как сделать прокрутку для длинного списка ярлыков прочитайте здесь.
Сегодня у меня всё. Всем удачи и до новых встреч.
Я публиковала раньше пост, как можно оформить ссылки в виде вертикально бегущих строк, что тоже экономит место в сайдбаре. Об этом можно прочитать здесь.
То, что предлагаю вам сегодня можно посмотреть на тестовом блоге в боковой колонке.
Код совершенно простой. Устанавливается в гаджет 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>
<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.
Как сделать прокрутку для длинного списка ярлыков прочитайте здесь.
Сегодня у меня всё. Всем удачи и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
0 коммент.:
ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML