Хочу предложить Вашему вниманию простенький плагин, сделанный на основе 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>

Как видим все очень просто. Это обычный маркированный список с соответствующими классами. Пункт меню с классом "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>

Посмотреть готовый пример можно здесь.
Скачать готовое меню можно от сюда.
Прочитать подробнее можно здесь
или здесь.


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии  

+1 #1 андрей 21.02.2012 12:54
не работает твой список (mozilla 8.0.1)
+1 #2 adminv15 21.02.2012 19:49
список не мой, но спасибо, что написали, исправил.

You have no rights to post comments