Дерево меню на jQuery

Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.

HTML

Структура состоит из обычного неупорядоченного списка. Нижние уровни сделаны просто добавлением в li верхнего уровня такие же списки ul:

<ul id="files">
	    <li><a href="documents">Мои документы</a>
	        <ul>
	            <li><a href="#">Мои файлы</a>
	                <ul>
	                    <li><a href="#">jQuery.doc</a></li>
	                    <li><a href="#">php.doc</a></li>
	                    <li><a href="#">mySQL.doc</a></li>
	                </ul>
	            </li>
	            <li><a href="#">Заметки</a>
	                <ul>
	                    <li><a href="#">Праздник.doc</a></li>
	                    <li><a href="#">Поздравления.doc</a></li>
	                </ul>
	            </li>
	            <li><a href="#">Путешествия</a>
	                <ul>
	                    <li><a href="#">Турция</a></li>
	                    <li><a href="#">Сочи</a></li>
	                </ul>
	            </li>
	            <li><a href="#">Портфолио</a>
	                <ul>
	                    <li><a href="#">pcvector.doc</a></li>
	                    <li><a href="#">pcvectornet.doc</a></li>
	                </ul>
	            </li>
	        </ul>
	    </li>
	    <li><a href="movies">Моё видео</a>
	        <ul>
	            <li><a href="#">Хоббит.avi</a></li>
	            <li><a href="#">Прометей.avi</a></li>
	        </ul>
	    </li>
	    <li><a href="music">Моя музыка</a>
	        <ul>
	            <li><a href="#">Julien Mokrani & Samuel Bodin – Beauty Reel.mp3</a></li>
	            <li><a href="#">Brian Tyler – Falling Into a Dream.mp3</a></li>
	        </ul>
	    </li>
	    <li><a href="photos">Мои фото</a>
	        <ul>
	            <li><a href="#">я.jpg</a></li>
	            <li><a href="#">цветок.jpg</a></li>
	            <li><a href="#">горы.jpg</a></li>
	            <li><a href="#">город.jpg</a></li>
	            <li><a href="#">небо.jpg</a></li>
	        </ul>
	    </li>
	</ul>

CSS

Для оформления меню используем такой стиль:

body {
	    font-size:62.5%;
	    margin:20px!important;
	}
	#files {
	    margin:2em 0 5em;
	    width:200px;
	}
	.tree {
	    font-size:1.5em;
	}
	.tree,.tree ul,.tree li {
	    list-style:none;
	    margin:0;
	    padding:0;
	    zoom:1;
	}
	.tree ul {
	    margin-left:8px;
	}
	.tree li a {
	    color:#555;
	    padding:.1em 7px .1em 27px;
	    display:block;
	    text-decoration:none;
	    border:1px dashed #fff;
	    background:url(../images/icon-file.gif) 5px 50% no-repeat;
	}
	.tree li a.tree-parent {
	    background:url(../images/icon-folder-open.gif) 5px 50% no-repeat;
	}
	.tree li a.tree-parent-collapsed {
	    background:url(../images/icon-folder.gif) 5px 50% no-repeat;
	}
	.tree li a:hover,.tree li a.tree-parent:hover,.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active {
	    color:#000;
	    border:1px solid#eee;
	    background-color:#fafafa;
	    -moz-border-radius:4px;
	    -webkit-border-radius:4px;
	    border-radius:4px;
	}
	.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active {
	    border:1px solid #e2f3fb;
	    background-color:#f2fafd;
	}
	.tree ul.tree-group-collapsed {
	    display: none;
	}

JS

Скрипты на странице мы подгружаем с помощью js фреймворка enhance.js, которая сначала проводит тест браузера на поддержку jаvascript и CSS, до того, как будут загружены на страницу дополнительные скрипты и стили:

<script type="text/jаvascript" src="js/enhance.js"></script>        
	<script type="text/jаvascript">
	    // Запуск теста на поддержку браузером скриптов
	    enhance({
	        loadScripts: [
	            'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js',
	            'js/jQuery.tree.js',
	            'js/example.js'
	        ],
	        loadStyles: ['css/enhanced.css'],
	        forcePassText: ['Посмотреть с подключенными скриптами'],
	        forceFailText: ['Посмотреть с выключенными скриптами']
	    });
	</script>

Если тест пройден, то грузим jquery, плагин tree и скрипт инициализации плагина, затем грузится стиль нашего меню и отладочный текст для локали.

Содержимое файла example.js:

$(function(){
	    $('#files').tree({
	        expanded: 'li:first'
	    });
	});

expanded: 'li:first' - указывает, что при загрузке страницы, первый элемент списка будет раскрыт и показаны его "детки".