jQuery древовидное меню

Меню сайта зачастую содержит довольно много категорий, и многое из них содержат в себе дополнительные категории. Получается довольно громоздкая конструкция.

Но можно отлично скомпоновать все это в виде древовидного меню .

В этом поможет jQuery Treeview плагин

Что и как?

Для использования понадобиться подключить несколько файлов

Code

и оформить наше меню в виде

Code

<ul id="menu" 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>
</ul>

и применить плагин к нашей конструкции

Code

Дополнительный функционал.

Code

$(«#add»).click(

function() {

var branches = $(«<li><span class=’folder’>Новая категория</span><ul>» +

«<li><span class=’file’>новый линк 1</span></li>» +

«<li><span class=’file’>новый линк 2</span></li>» +

«</ul></li>»).appendTo(«#browser»);

$(«#menu»).treeview({ add: branches });

}

);

Ваша оценка:

1
2
3
4
5

Скачать jQuery древовидное меню по прямой ссылке

Скачать [69.6 Kb] (cкачиваний: 299)

Рейтинг: 1.0 Всего:1 Добавил: Михалыч

« Назад

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:

Комментарии

Всего комментариев: 1
Порядок вывода комментариев: 1 \| Валера пишет: \| 14.12.2012 \| 14:55 Страница с комментарием \| Как на uCoz сайте это подключить? (0)