Эффекты на основе Java Script

Lorem lispum
In blandit turpis.
Cras a mi at odio.
Vivamus egestas urna.

Lorem lispum
In blandit turpis.
Cras a mi at odio.
Vivamus egestas urna.

Lorem lispum
In blandit turpis.
Cras a mi at odio.
Vivamus egestas urna.

Lorem lispum
In blandit turpis.
Cras a mi at odio.
Vivamus egestas urna.

Списки приведены сдесь для примера, здесь может быть что угодно. Например flash или картинка:

Выезжающая сверху или снизу информационная панель

<Вернуться в каталог>

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<STYLE>
/* параметры панели */
.slide-panel {position: absolute; z-index: 25;}
.bottom {bottom: 0;}
.top {top: 0;}  
/* сам блок */
.content {margin-top: -5px; margin-left: auto; margin-right: auto; z-index: 10; overflow: hidden; text-align: left; background-color: #555; height: 0; width: 105%; color: #fff; border: 2px solid #ff0000;} 
/* параметры и стиль ссылки управления */
.slide-button {margin-left: 0; margin-right: auto; cursor: pointer; color: #00ffff; padding-top: 10px; padding-left: 50px; width: 150px; /*	background-color: #333;   */ }
.slide-button:hover {color: #9f9d8e;}
#workspace {padding-top: 150px;}
/* параметры и стиль списков содержимого */
#list-1 {display: inline; float: left;}
#list-2 {display: inline; float: left;}
#list-3 {float: left;}
#list-4 {float: left;}
ul.list {line-height: 20px; list-style-type: none; width: 20%; font-size: 0.85em;}
ul.list li {border-bottom: 1px solid #ffff00; padding-top: 3px; padding-bottom: 3px; cursor: pointer;}
ul.list li:hover {color: #9f9d8e;}
ul.list li.header {color: #e56f03; letter-spacing: 3px; padding-bottom: 20px; font-variant: small-caps; font-size: 1.7em; margin-top: 10px; cursor: text;}
ul.list li.header:hover {font-size: 1.7em;}
</STYLE>	
<script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_okna/924/js/jquery.js" type="text/javascript"></script>
<script>
	var otkryt = "Открыть панель";       // названия ссылок управления
	var zakryt = "Закрыть панель";
	$(document).ready(function(){
	
		$("#testZone").slideBox({width: "100%", height: "250px", position: "top"});  // ширина, высота и местоположение панели(возможно  top и bottom
	});
</script>
<script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_okna/924/js/slidebox1.js" type="text/javascript"></script>

Всё подписано, проблем быть не должно. Если Вы смените положение панели с top на bottom, Вам необходимо будет немного скорректировать стили исходя из того что панель снизу от ссылки управления.

Внутри тега <BODY> - </BODY> в любом месте.

<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>Списки приведены сдесь для примера. Кроме списков тут может быть что угодно. Например картинка: --><img src="http://skriptkpbstudio.ucoz.ru/flash/zastawka_script_luch1.gif">
	</div>

Здесь задаём нужное Вам содержимое панели. Думаю что здесь всё понятно.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.