Menu drzewiaste

Przykład

Kliknij foldery menu myszą:

Skrypt

Wymagana wiedza:

Zagnieżdżanie wykazów <ul>...</ul>
Podstawy odsyłaczy
Podstawy stylów CSS (m.in. arkusze stylów i klasy selektorów)

Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim:

ul.tree {
	display: block;
	margin-left: 0;
	padding-left: 0;
}

ul.tree ul {
	display: block;
	margin-left: 0;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}

ul.tree li {
	display: block;
	list-style-type: none;
	padding-left: 20px;
	background-image: url("document.gif");
	background-position: left top;
	background-repeat: no-repeat;
}

ul.tree li.closed {
	background-image: url("closed.gif");
	background-position: left top;
	background-repeat: no-repeat;
}

ul.tree li.opened {
	background-image: url("opened.gif");
	background-position: left top;
	background-repeat: no-repeat;
}

ul.tree li a {
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
}

ul.tree li a.folder {
	cursor: pointer;
}

ul.tree li a.active {
	font-weight: bold;
}

ul.tree li a:hover {
	text-decoration: underline;
}

Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim:

/**
 * @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
 * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
 */

function Tree(id)
{
	this.id = id;
	
	this.click = function ()
	{
		for (var i = 0, el_node; i < this.parentNode.childNodes.length; i++)
		{
			el_node = this.parentNode.childNodes.item(i)
			if (el_node.nodeName.toLowerCase() == 'ul')
			{
				el_node.style.display = el_node.style.display == 'none' ? 'block' : 'none';
				this.parentNode.className = this.parentNode.className.replace(/(^| +)(opened|closed)( +|$)/g, ' ') + ' ' + (el_node.style.display == 'none' ? 'closed' : 'opened');
				return;
			}
		}
	}
	
	this.start = function (el)
	{
		for (var i = 0, el_node; i < el.childNodes.length; i++)
		{
			el_node = el.childNodes.item(i);
			if (el_node.nodeName.toLowerCase() == 'a')
			{
				el_node.onclick = this.click;
				for (var j = 0; j < el_node.parentNode.childNodes.length; j++)
				{
					if (el_node.parentNode.childNodes.item(j).nodeName.toLowerCase() == 'ul')
					{
						el_node.parentNode.className += ' closed';
						el_node.className = (el_node.className ? el_node.className + ' ' : '') + 'folder';
						break;
					}
					if (el_node.parentNode.childNodes.item(j).nodeName.toLowerCase() == 'li') break;
				}
				if (el_node.href && unescape(el_node.href) == unescape(window.location.href))
				{
					el_node.className = 'active';
					var el_parentNode = el_node;
					do
					{
						el_parentNode = el_parentNode.parentNode;
						if (el_parentNode.nodeName.toLowerCase() == 'ul')
						{
							el_parentNode.style.display = 'block';
							if (document.getElementById(this.id) != el_parentNode) el_parentNode.parentNode.className = el_parentNode.parentNode.className.replace(/(^| +)(opened|closed)( +|$)/g, ' ') + ' opened';
						}
					}
					while (document.getElementById(this.id) != el_parentNode)
				}
			}
			else if (el_node.nodeName.toLowerCase() == 'ul') el_node.style.display = 'none';
			this.start(el_node);
		}
	}
	
	if (document.getElementById && document.childNodes) this.start(document.getElementById(this.id));
}

Następnie wklej w treści nagłówkowej strony <head>...</head> następujący kod:

<link rel="Stylesheet" type="text/css" href="tree.css" />
<script type="text/javascript" src="tree.js"></script>

Na koniec w wybranym miejscu strony - tam, gdzie ma się wyświetlać menu drzewiaste - wstaw kod oparty na technice zagnieżdżania wykazów (tylko wypunktowanie, czyli lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów listy będzie automatycznie odzwierciedlał strukturę drzewa menu. Oto przykładowy kod:

<ul id="tree0" class="tree">
<li><a href="...">Dokument 1</a></li>
<li><a>Folder 2</a>
	<ul>
	<li><a href="...">Dokument 2.1</a></li>
	<li><a href="...">Dokument 2.2</a></li>
	</ul>
</li>
<li><a>Folder 3</a>
	<ul>
	<li><a href="...">Dokument 3.1</a></li>
	<li><a>Folder 3.2</a>
		<ul>
		<li><a href="...">Dokument 3.2.1</a></li>
		<li><a href="...">Dokument 3.2.2</a></li>
		<li><a href="...">Dokument 3.2.3</a></li>
		</ul>
	</li>
	<li><a href="...">Dokument 3.3</a></li>
	</ul>
</li>
<li><a href="...">Dokument 4</a></li>
</ul>

<script type="text/javascript">
// <![CDATA[
new Tree("tree0");
// ]]>
</script>

Rzeczy, które trzeba tutaj podkreślić:

Najbardziej zewnętrzny znacznik <ul>...</ul> powinien mieć przypisaną klasę CSS: class="tree". Dzięki temu punkty menu przyjmą odpowiedni wygląd.
Ten sam najbardziej zewnętrzny znacznik <ul>...</ul> musi posiadać atrybut: id="tree0"
Zaraz poniżej kodu menu musi się znajdować blok <script type="text/javascript">...</script>. Zauważ, że wyróżniony w nim identyfikator tree0 musi być identyczny z tym, co wpisano jako wartość atrybutu id="..." na początku menu!

UWAGA!
Wewnątrz wszystkich znaczników <li>...</li> muszą znajdować się znaczniki odsyłaczy, czyli: <a>...</a>.
Odsyłacze znajdujące się w węzłach menu (czyli tworzące otwierane i zamykane foldery) nie powinny posiadać atrybutu href="...". Alternatywnie można wpisać tam href="javascript:void(0)" - wtedy również w Internet Explorerze 6 foldery drzewa będą wyglądały i zachowywały się jak odnośniki, a nie jak zwykły tekst.

W jednym dokumencie nie może być dwóch elementów z takim samym atrybutem id="...". Dlatego jeżeli chcemy wstawić drugie menu na tej samej stronie, trzeba dla niego użyć już zmodyfikowanego kodu, np.:

<ul id="tree1" class="tree">
...
</ul>

<script type="text/javascript">
// <![CDATA[
new Tree("tree1");
// ]]>
</script>

Aby menu prezentowało się w pełni funkcjonalnie, trzeba jeszcze przygotować trzy grafiki ikon i zapisać je w tym samym katalogu, co skrypt menu. Na przykład:

closed.gif - przedstawia ikonę zamkniętego folderu menu,
opened.gif - otwarty folder,
document.gif - dokument.

Jeżeli chcemy w jakiś sposób wyróżnić niektóre dokumenty na liście, można w tym celu przypisać im oddzielną ikonę, która wyraźnie odróżnia się od innych:

<ul id="tree0" class="tree">
<li><a>Folder 1</a>
	<ul>
	<li><a href="...">Dokument 1.1</a></li>
	<li><a href="...">Dokument 1.2</a></li>
	</ul>
</li>
<li><a href="...">Dokument 2</a></li>
<li style="background-image: url(document1.gif)"><a href="...">Dokument 3</a></li>
<li style="background-image: url(document2.gif)"><a href="...">Dokument 4</a></li>
</ul>

Na koniec warto dodać, że opisywany tutaj skrypt posiada system automatycznego wykrywania aktualnie załadowanej strony. Dzięki niemu po wczytaniu dokumentu wybranego na liście, gałąź w drzewie menu w której znajduje się odpowiadający link jest na starcie rozwinięta, a sam link zostaje wyróżniony przy użyciu klasy CSS pod nazwą active, co natychmiast wskazuje użytkownikowi, na której podstronie teraz się znajduje, a także ułatwia nawigację.

Kurs HTML - strona WWW za darmo

Menu drzewiaste

Przykład

Skrypt