Создаем древовидное меню с помощью jQuery

Итак, для начала необходимо создать структуру нашего меню:

<ul id="example" class="filetree">
	<li><span class="folder">Папка 1</span>
		<ul>
			<li><span class="file">Файл 1.1</span></li>
		</ul>
	</li>
	<li><span class="folder">Папка 2</span>
		<ul>
			<li><span class="folder">Подпапка 2.1</span>
				<ul>
					<li><span class="file">Файл 2.1.1</span></li>
					<li><span class="file">Файл 2.1.2</span></li>
				</ul>
			</li>
			<li><span class="file">Файл 2.2</span></li>
		</ul>
	</li>
	<li class="closed"><span class="folder">Папка 3 (свернутая в начале)</span>
		<ul>
			<li><span class="file">Файл 3.1</span></li>
		</ul>
	</li>
	<li><span class="file">Файл 4</span></li>
</ul>

Как видим все очень просто. Это обычный маркированный список с соответствующими классами. Пункт меню с классом "Folder" будет представлен у нас с иконкой в виде папки, а с классом "File" - с иконкой в виде документа. Иконки Вы, конечно, можете заменить на свои.

Теперь чтобы все это заработало необходимо подключить библиотеку к файлу, а также вызвать функцию treeview().

Код javascript:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
<script>
	$(document).ready(function(){
	$("#example").treeview();
	});
</script>