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

jquery_tree_view

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

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

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

Что и как?

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

<link rel=”stylesheet” href=”/js/plugins/treeview/jquery.treeview.css” type=”text/css” />

<script type=”text/javascript” src=”/js/plugins/treeview/jquery.treeview.js”></script>

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

<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>
и применить плагин к нашей конструкции
<script>
  $(document).ready(function(){
    $("#menu").treeview();
  });
  </script>

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

Добавления дополнительных веток в меню осуществляется через опцию add: branches

Добавим ниже меню элемент по клику на который будет добавляться новая категория с линками, ID ему зададим “add” и повесим код

$(“#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 });

}

);

Post to Twitter Tweet This Post

Тэги: , , ,

  • jQuery SELECT (jquery-asmselect)
  • Wordpress подключение JQuery
  • jQuery png Fix
  • jQuery ajax в IE7
  • jQuery cookie проще некуда
  • Prototype и jQuery используем одновременно
  • jQuery watermark input field
  • jQuery округлые углы
  • jQuery ajax рейтинг
  • jQuery table sort сортировка таблиц
  • jQuery выбираем цвет
  • jQuery селекторы (небольшая справка)
  • 2 комментариев на “jQuery древовидное меню”

    1. Joliat пишет:

      А как его прикрутить к Wordpress?

    2. saintist пишет:

      в статье подробно все описано, если на Wordpress прикручиваешь то делаешь все тоже самое

    Оставить комментарий