Древовидное меню: Treeview для jQuery. Часть 1

Плагин Treeview для jQuery позволяет создать многоуровневое динамическое меню навигации из простых неупорядоченных HTML-списков. Как обычно, подключаем необходимые файлы в разделе head HTML-документа:

<link rel="stylesheet" href="css/jquery.treeview.css" />   
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>

HTML:

<ul id="menu">
    <li>Элемент 1
        <ul>
            <li>Элемент 1.1</li>
            <li>Элемент 1.2</li>
            <li>Элемент 1.3</li>
        </ul>
    </li>
    <li>Элемент 2
        <ul>
            <li>Элемент 2.1</li>
            <li>Элемент 2.2</li>
            <li>Элемент 2.3</li>
        </ul>
    </li>
    <li>Элемент 3
        <ul>
            <li>Элемент 3.1</li>
            <li>Элемент 3.2</li>
            <li>Элемент 3.3</li>
        </ul>
    </li>
</ul>

JavaScript:

$(document).ready(function(){
  $("#menu").treeview();
});

Если элементу <ul> присвоить класс с именем filetree, а внутри элементов списка <li> разместить элементы <span class=”folder”> и <span class=”file”>, то получим меню с иконками папок и файлов. Если элементу <li> присвоить класс с именем closed, то при первоначальной загрузке этот элемент будет скрыт.

Продолжение следует…

Один комментарий

  1. Alex:

    Здесь выложил свое меню, простое и с запоминанием состояния если страничка перезагружается http://share-know.ru/?id=24

    Источник: http://www.webmasters.by/articles/web-programming/55-create-treeview-menu.html#ixzz1pHLNbyUO

Оставьте свой отзыв