Переключатель блоков информации с дополнительным открывающимся меню

[TITOLO PRESENTAZIONE]

Информационный блок 1

Distributed form:	Можно всталять Формы и картинки.

Информационный блок 2

Можно вставлять СПИСКИ

Prova
Prova 2
- Prova 2_1
- Prova 2_2
- Prova 2_2
Prova 3
Prova 4
Prova 5

Информационный блок 3

Колличество информационных блоков на Ваше усмотрение. В блоки можно вставлять всё что угодно: текст, ссылки, формы, таблички, картинки, Flash и т.д.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sed ipsum. Vivamus metus nulla, elementum ac, rutrum id, malesuada ut, elit. Mauris turpis augue, feugiat non, vehicula ut, accumsan vel, ligula. Phasellus laoreet consequat arcu. Proin pretium, velit sit amet imperdiet suscipit, lectus erat pharetra ante, ullamcorper tincidunt dolor nunc sed sapien. Nam dictum cursus mauris. Etiam nec arcu. Proin sodales dapibus eros. Vestibulum accumsan commodo libero. Proin pretium augue a sapien. Phasellus pretium viverra lacus. Integer mattis, quam eu malesuada tristique, quam elit pulvinar purus, faucibus pharetra magna sem a libero. Maecenas ullamcorper sodales ante. Vestibulum et urna. Mauris quam augue, ultricies ac, cursus vel, venenatis a, tellus. Donec interdum blandit turpis. Sed eros elit, pulvinar at, tempus vel, vestibulum nec, eros. Nam lacinia enim in quam. Morbi dui justo, varius vulputate, dignissim quis, facilisis non, est.

Информационный блок 4


С Flash есть небольшие тонкости, необходимо меню распологать так чтобы оно не попадало на Flash иначе Flash будет его закрывать.
Username:
Password:

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

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

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

<style type="text/css" media="screen">
  /* перекл. информац. блок в целом */
#boundary   {width:500px; border: #ff0000 1px solid; position:relative;}
/* Class applied to hide the slides and the form */	
.hide   {position:absolute; top:-999px; left:-9999px;}
/* верхняя зона названия и скроллинга */ 
/*  Add a height here to force a certain height for boundary when JavaScript is available */
#boundary.js   {}
/* название */
#boundary.js h2   {background:#036; margin:0 0 10px 0; color:#00ffff; padding:5px 20px; padding-right:215px; letter-spacing:-1px; font-size:1.5em; font-weight:normal; height:20px;}
html>body h1,html>body #boundary.js h2   {height:auto;}
/* List with previous and next links and indicator which slide is shown */
/* счетчик верхнего скроллинга */
.counter  {position:absolute; top:10px; right:1em; font-weight:bold; margin:0; padding:0; float:left;}
ul.counter li   {color: red; float:left; padding:0 1em 0 0; margin:0; list-style-type:none;}    
/* стрелки верхнего скроллинга */                               
.slide .counter a   {text-decoration:underline; border:none; font-weight:bold; color:#fff000;}
/* блок информации */
div.slide   {width:500px; background:#aaa; padding-bottom:1em; color: #000;}
.slide p   {margin:0 1em;}
.slide a   {color:#ff0369; border-bottom:1px solid #000; text-decoration:none;}
.slide form {margin:1em 2em;}
/* нижняя зона переключателя */
#footer  {position:relative; border: #ff0000 1px solid; border-top: none; width:495px; background:#888; text-align:left; padding:5px 0 0 5px; clear:both; color:#fff; font-weight:bold; font-size:80%; line-height:2.5em;}
#footer a   {color:#006600;}           /* ссылка вызова меню */
/* Nested TOC list(открывающееся меню) */	
#toclist   {margin:0; padding:0; position:absolute; bottom:10px; right:1em; width:300px;}
#toclist li   {list-style-type:none; text-align:right; position:relative;}
#toclist li ul   {background:#ccc; padding:10px; width:280px; position:absolute; right:-2em; bottom:2.4em; border-bottom:1px solid #369;}
#toclist li ul li   {list-style-type:none; font-size:90%; text-align:left; position:relative;}
/* ссылки открывающегося меню */
#toclist li li a   {line-height:1.4em;}
#toclist li li a:hover   {line-height:1.4em; background:#fff;}
ul  {margin:0 2em 0 2em; padding:0;}  
li   {list-style-type:square; line-height:1.3em; padding:.5em 0;}  
li li   {list-style-type:square; line-height:1.3em; padding:.5em 0 0 0;} 
ul ul   {margin-left:2em;}
/* close TOC item (верх открывающегося меню) */	
#toclist li ul li#closeToc {text-align:right; position:absolute; top:-10px; right:0px; padding-right:10px; padding-bottom:5px; 	width:290px; background: #69c; line-height:1em;}
</style>
<script type="text/javascript">
// Texts
	var tocLinkText='Menu';                         // название открывающегося меню
	var tocCloseText='Close Menu';                  // ссылка сброса открыв. меню
	var counterText='(_x_ of _y_)';                // компановка счетсика блоков
	var nextSlideText='>>';                        // блок вперед
	var prevSlideText='<<';                        // блок назад
	var titleAdd=' --- ';                          // разделительный элемент
</script>
<script type="text/javascript" src="domslides1.js"></script>

Всё подписано, проблем быть не должно.

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

<div id="boundary">
	<h1>[TITOLO PRESENTAZIONE]</h1>

<div class="slide">
		<h2>[TITOLO 1]</h2>
		<table><tr>
    <td style="vertical-align: top;">Distributed form: </td>
    <td><input class=pole type="text" name="first" />
    <br /> <small>Можно всталять Формы и картинки.</small></td></tr>
  <tr><td colspan=2><img src="http://skriptkpbstudio.ucoz.ru/flash/zastawka_script_luch1.gif"><td colspan=2></td></tr>
  </table>
		
	</div>

<div class="slide">
		<h2>[TITOLO 2]</h2>
		Можно вставлять СПИСКИ
		<ul>
			<li>Prova</li>
			<li>Prova 2
				<ul>
					<li>Prova 2_1</li>
					<li>Prova 2_2</li>
					<li>Prova 2_2</li>
				</ul>
			</li>
			<li>Prova 3</li>
			<li>Prova 4</li>
			<li>Prova 5</li>
		</ul>
	</div>

<div class="slide">
		<h2>[TITOLO 3]</h2>
		Колличество информационных блоков на Ваше усмотрение. В блоки можно вставлять всё что угодно: текст, ссылки, формы, таблички, картинки, Flash и т.д. <br> 
	</div>

<div class="slide">
		<h2>[TITOLO 4]</h2>
		<table>
		<tr><td colspan=2><div style="width: 468px" class=ramka><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="468" height="60">
<param name="src" value="http://skriptkpbstudio.ucoz.ru/flash/studio_kruglaj_ok_mal24.swf" />
<PARAM NAME="bgcolor" VALUE="#444444">
<embed name="gallery" type="application/x-shockwave-flash" src="http://skriptkpbstudio.ucoz.ru/flash/studio_kruglaj_ok_mal24.swf" width="468" height="60"></embed></object></div></td></tr>
        <tr><td colspan=2>С Flash есть небольшие тонкости, необходимо меню распологать так чтобы оно не попадало на Flash иначе Flash будет его закрывать.</td></tr>
		<tr><td>Username: </td>
    <td><input class=pole style="width: 120px;" type="text"     name="username" /></td>
  </tr><tr>
    <td>Password: </td>
    <td><input class=pole style="width: 120px;" type="password" name="password" /></td>
  </tr><tr>
    <td> </td>
    <td><input class=knopka type="submit" value="Submit" /></td></tr>
  
  </table>
	</div>

</div>
<div id="footer">[AUTORE], [DATA]</div>

Здесь тоже всё достаточно просто. Задаём сами блоки информации: их колличество, названия и информацию в них. Колличество блоков на Ваше усмотрение. Информацию в них можно вставлять любую.

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

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