Многоуровневое дерево на CSS

klierik · November 9, 2007

Доброго.

Что-то не получается найти примерчик

обычного дерева, как в проводнике, реализованный на CSS.

если есть у кого что-то на примете, подкиньте линк, плиз.

tnx u

maddogrts · November 9, 2007

http://www.htmlbook.ru/content/ ))))))

ты про что вообще имеешь в виду ?

strix · November 9, 2007

Деревья бывают разные

например,

http://www.destroydrop.com/javascripts/tree/

http://oopsilon.com/DOM-Manipulation-and-CSS-Trees

guvatara · November 9, 2007

можно уточняющий вопрос?

Вам нужно чтоб список раскрывался по щелчку мыши?

Тогда чисто на CSS без JS это не реализуемо (onclick это уже JS).

Вот удачный пример списка с JS

http://xhtml.ru/2007/04/29/compact-list/

maddogrts · November 9, 2007

guvatara

Ха Ха возможно Тут кстати и висит )), в "делемся хитростями"

klierik · November 9, 2007

все очень благодарен

так же вопрос по теме, да бы не создавать отдельный топ.

почему, при нажатии на маркер списка, выделяется его содержимое?

как это можно присеч?

upd: проблема в FF

upd2:

верстая дерево, нашел довольно необычный баг в IE

css:

/*** x-tree ***/
.x-tree, .x-tree * {
	margin: 0px;
	padding: 0px;
}
	/** defaults **/
	.x-tree ul {
		list-style: none;
		list-style-image: url(../images/x-tree-ico-plus.gif);	/* default marker for all items */
		margin-left: 13px;

		margin-left: expression('16px');
	}
	.x-tree li {
		background-image: url(../images/x-tree-ico-dir-closed.gif);	/* default ico for items */
		background-position: 0 middle;
		background-repeat: no-repeat;
		font: normal 11px tahoma;
		color: #000;
		padding-left: 19px;
		cursor: pointer;
		margin: 1px 0;
		height: 17px;

		/*border: 1px solid #ccc;*/
		/*background-color: #eee;*/

		_cursor: hand;
	}
	.x-tree ul ul {
		margin-top: 2px;
		margin-bottom: 0px;
		margin-left: 2px;
	}

	/** events **/
	.x-tree li.opened {
		list-style-image: url(../images/x-tree-ico-minus.gif);
		height: auto;
	}
	.x-tree li.closed {
		list-style-image: url(../images/x-tree-ico-plus.gif);
	}

	/** types **/
	.x-tree li.empty {
		list-style: none;
	}
	.x-tree li.notype ul, .x-tree li.notype {
		margin-left: 0px;
		list-style: none;
		background-image: none;
	}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>x-tree</title>
<link rel="stylesheet" href="css/x-tree.css" type="text/css" />
</head>

<body>

	<!-- x-tree -->
	<div class="x-tree">

		<ul>
			<li> <input type="checkbox" value="" /> root item 4</li>
			<li class="opened"> <input type="checkbox" value="" /> root item 5

				<!-- 1`st inner -->
				<ul>
					<li> <input type="checkbox" value="" /> 1`st inner item 1</li>
					<li class="opened"> <input type="checkbox" value="" /> 1`st inner item 2

						<!-- 2`nd inner item -->
						<ul>
							<li> <input type="checkbox" value="" /> 2`nd inner item 1</li>
							<li class="notype"> <input type="checkbox" value="" /> 2`nd inner item 2</li>
							<li class="notype"> <input type="checkbox" value="" /> 2`nd inner item 3</li>
						</ul>

					</li>
					<li> <input type="checkbox" value="" /> 1`st inner item 3</li>
				</ul>

			</li>
		</ul>

	</div>
	<!-- /x-tree -->

</body>
</html>

баг заключаеться в том, что у елементов, которым присвоен класс empty не пропадает маркер.

есть идеи как побороть IE?

Sign In

Многоуровневое дерево на CSS

Question

klierik

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

maddogrts

Link to comment

Share on other sites

strix

Link to comment

Share on other sites

guvatara

Link to comment

Share on other sites

maddogrts

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information