Хочу предложить Вашему вниманию простенький плагин, сделанный на основе Javascript-библиотеки 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>
<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>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
<script>
$(document).ready(function(){
$("#example").treeview();
});
</script>
Посмотреть готовый пример можно здесь.
Скачать готовое меню можно от сюда.
Прочитать подробнее можно здесь
или здесь.
ВКонтакте
Комментарии