Выплывающая панель с помощью jQuery

Демо

Скачать исходный код

Прежде всего в шапке документа нам необходимо подключить фреймворк, таблицу стилей и вспомогательные скрипты:

<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 и панель поменяет свое положение.

Далее идет код, который используется для наполнения панели разными ссылками. Тут Вы можете дать волю фантазии.

<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>

Вот и все готово! Спасибо за внимание.