16:12
В сегодняшнем уроке мы создадим красивую анимированную панель, которая при нажатии на кнопку будет плавно появляться сверху или снизу.
Это отличное место для показа важных ссылок посетителям сайта. Данное решение существенно повышает юзабилити любого сайта.
Прежде всего в шапке документа нам необходимо подключить фреймворк, таблицу стилей и вспомогательные скрипты:
Code
<link rel="stylesheet" href="slidebox.css" type="text/css" media="screen" />
<script src="jquery.js" type="text/javascript"></script>
<script src="slidebox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#testZone").slideBox({width: "100%", height: "200px", position: "top"});
});
</script>
Как Вы видите в последней функции мы указали класс, ширину, высоту и позицию нашей панели. Достаточно поменять top на bottom и панель поменяет свое положение.
Далее идет код, который используется для наполнения панели разными ссылками. Тут Вы можете дать волю фантазии.
Code
<div id="testZone">
<ul id="list-1" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>
<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>
<ul id="list-2" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>
<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>
<ul id="list-3" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>
<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>
<ul id="list-4" class="list">
<li class="header">Lorem lispum.</li>
<li class="item">In blandit turpis.</li>
<li class="item">Cras a mi at odio.</li>
<li class="item">Vivamus egestas urna.</li>
<li class="item">Furce gravida lectus.</li>
</ul>
</div>
Вот и все готово! Спасибо за внимание.
