Очень понравился один список этого сайта

[Spartakvladimir]

Здравствуйте.

Подскажите, пожалуйста, как мне сделать такой же раскрывающийся список, как на этой ссылке: http://htmlbook.ru/content/

Допустим мне надо три пункта списка, из которых в каждом есть еще по 2 пункта. Как мне это реализовать?

[Vlad]

Готовый скрипт лежит по адресу

http://htmlbook.ru/download/simpletree.zip или

http://htmlbook.ru/download/list.rar

[Spartakvladimir]

Большое вам спасибо! У меня тогда будет еще такой вопрос: а средствами css+html такой можно сделать?

[IceFroz]

можно

Взято с сайта artlebedev.ru

<style type="text/css">
	.treeview { padding: 0; clear: both; font-family: Arial, sans-serif; width: 100%; }
	.treeview * { font-size: 100.1%; }
	.treeview ul
	{
		overflow: hidden; width: 100%; margin: 0; padding: 0 0 1.5em 0;
		list-style-type: none;
	}
	.treeview ul ul { overflow: visible; width: auto; margin: 0 0 0 0; padding: 0 0 0 0.75em; }
	/* класс для ul после которых нет li в родительских ветках */
	.treeview ul.l { border-left: 1px solid; margin-left: -1px; }
	.treeview li.cl ul { display: none; }
	.treeview li { margin: 0; padding: 0; }
	.treeview li li { margin: 0 0 0 0.5em; border-left: 1px dotted; padding: 0; }
	.treeview li div { position: relative; height: 1.5em; min-height: 16px; //height: 1.3em; }
	.treeview li li div { border-bottom: 1px dotted; }
	.treeview li p
	{
		position: absolute; z-index: 1; top: 0.8em; //top: 0.65em; left: 1.75em;
		width: 100%; margin: 0; border-bottom: 1px dashed; padding: 0;
	}
	.treeview a { padding: 0.1em 0.2em; white-space: nowrap; //height: 1px; }
	.treeview img.i
	{
		border-right: 2px solid; border-bottom: 0.5em solid;
		margin-bottom: -0.5em; vertical-align: middle;
	}
	.treeview a.sc
	{
		position: absolute; top: 0.06em;
		margin-left: -1em; padding: 0; text-decoration: none;
	}

	/* colors */
	.treeview li p,
	.treeview img.i,
	.treeview .sc
	{ background: #f5f5ea; }
	.treeview ul.l,
	.treeview li p,
	.treeview img.i
	{ border-color: #f5f5ea; }
	.treeview ul li li,
	.treeview ul li li div
	{ border-color: #999999; }
	.treeview a,
	.treeview a.sc,
	.treeview a.sc:hover
	{ color: #000000; }
	.treeview a:hover
	{ color: #cc0000; }
</style>
<script type="text/javascript">
	function UnHide( eThis ){
		if( eThis.innerHTML.charCodeAt(0) == 9658 ){
			eThis.innerHTML = '▼'
			eThis.parentNode.parentNode.parentNode.className = '';
		}else{
			eThis.innerHTML = '►'
			eThis.parentNode.parentNode.parentNode.className = 'cl';
		}
		return false;
	}
</script>
<div class="treeview">
	<ul>
		<li>
			<div><p><a href="#" class="sc" onclick="return UnHide(this)">▼</a>
				<a href="#">Programs</a></p></div>
			<ul>
				<li class="cl">
					<div>
						<p>
							<a href="#" class="sc" onclick="return UnHide(this)">►</a>
							<a href="#">Adobe CS2</a>
						</p>
					</div>
					<ul>
						<li>
							<div>
								<p>
									<a href="#"><img src="i-photoshop.gif" class="i" />Photoshop</a>
								</p>
							</div>
						</li>
						<li>
							<div>
								<p>
									<a href="#"><img src="i-illustrator.gif" class="i" />Illustrator</a>
								</p>
							</div>
						</li>
						<li>
							<div>
								<p>
									<a href="#"><img src="i-indesign.gif" class="i" />InDesign</a>
								</p>
							</div>
						</li>
					</ul>
				</li>
				<li class="cl">
					<div>
						<p>
							<a href="#" class="sc" onclick="return UnHide(this)">►</a>
							<a href="#">Microsoft Office</a>
						</p>
					</div>
					<ul>
						<li>
							<div>
								<p>
									<a href="#"><img src="i-word.gif" class="i" />Word</a>
								</p>
							</div>
						</li>
						<li>
							<div>
								<p>
									<a href="#"><img src="i-excel.gif" class="i" />Excel</a>
								</p>
							</div>
						</li>
					</ul>
				</li>
				<li>
					<div>
						<p>
							<a href="#"><img src="i-explorer.gif" class="i" />Internet Explorer</a>
						</p>
					</div>
				</li>
				<li>
					<div>
						<p>
							<a href="#"><img src="i-firefox.gif" class="i" />Mozilla Firefox</a>
						</p>
					</div>
				</li>
				<li>
					<div>
						<p>
							<a href="#"><img src="i-opera.gif" class="i" />Opera</a>
						</p>
					</div>
				</li>
			</ul>
		</li>
	</ul>
</div>

[ZoNT]

  IceFroz said:

можно

Взято с сайта artlebedev.ru

<script type="text/javascript">
	function UnHide( eThis ){
		if( eThis.innerHTML.charCodeAt(0) == 9658 ){
			eThis.innerHTML = '▼'
			eThis.parentNode.parentNode.parentNode.className = '';
		}else{
			eThis.innerHTML = '►'
			eThis.parentNode.parentNode.parentNode.className = 'cl';
		}
		return false;
	}
</script>

Это ты называешь "средствами css+html"???

[Иван Шумов]

простите за смайлофлуд

[Spartakvladimir]

2 IceFroz. Спасибо, я на заметку возьму), просто я еще JavaScript не изучал, как вижу придется

[IceFroz]

  ZoNT said:

  IceFroz said:

можно

Взято с сайта artlebedev.ru

<script type="text/javascript">
	function UnHide( eThis ){
		if( eThis.innerHTML.charCodeAt(0) == 9658 ){
			eThis.innerHTML = '▼'
			eThis.parentNode.parentNode.parentNode.className = '';
		}else{
			eThis.innerHTML = '►'
			eThis.parentNode.parentNode.parentNode.className = 'cl';
		}
		return false;
	}
</script>

Это ты называешь "средствами css+html"???

Немного не считается

[JIucky]

  IceFroz said:

Это ты называешь "средствами css+html"???

Немного не считается