Сразу приведу пример и выложу архив демо, а то меня, не без оснований конечно, обвиняли в отсутствии демо в статьях про jQuery UI. Поскольку ничего особенно сложного в этом решении нет, то я буду краток – только код, пример и минимум необходимых пояснений.

Итак, сначала мы делаем все в точности так же, как написано в статье jQuery UI – виджет Accordion. Т.е. подключаем необходимые файлы к HTML-странице. Здесь же внесем первое дополнение. Для того, чтобы иметь возможность запоминать состояние секций аккордеона, нам потребуется подключить еще один небольшой, но весьма полезный плагин – jQuery Cookie.

<script src="js/jquery.cookie.js" type="text/javascript"></script>

Поиметь свежую версию этого плагина можно на http://plugins.jquery.com/project/Cookie.

Теперь приведу пример HTML-разметки меню-аккордеона.

<div id="accordion">
  <h3><a href="#">Секция 1</a></h3>
  <ul>
    <li><a href="?1-1">Пункт меню 1-1</a></li>
    <li><a href="?1-2">Пункт меню 1-2</a></li>
    <li><a href="?1-3">Пункт меню 1-3</a></li>
  </ul>
  <h3><a href="#">Секция 2</a></h3>
  <ul>
    <li><a href="?2-1">Пункт меню 2-1</a></li>
    <li><a href="?2-2">Пункт меню 2-2</a></li>
    <li><a href="?2-3">Пункт меню 2-3</a></li>
  </ul>
  <h3><a href="#">Секция 3</a></h3>
  <ul>
    <li><a href="?3-1">Пункт меню 3-1</a></li>
    <li><a href="?3-2">Пункт меню 3-2</a></li>
    <li><a href="?3-3">Пункт меню 3-3</a></li>
  </ul>
  <h3><a href="#">Секция 4</a></h3>
  <ul>
    <li><a href="?4-1">Пункт меню 4-1</a></li>
    <li><a href="?4-2">Пункт меню 4-2</a></li>
    <li><a href="?4-3">Пункт меню 4-3</a></li>
  </ul>
</div>

Ничего загадочного тут и вовсе нет. Что еще? Добавим немного стилей, чтобы выделять активный пункт меню. Например так:

a.open { color: #f00;}

т.е. в примере просто выделяем текст ссылки в меню красным цветом.

А теперь самое интересное – javascript-код:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    navigation: true
  });
  $("#accordion li a").click(function(){
    $.cookie("openItem", $(this).attr("href"));
  });
  $("#accordion li a[href$=`" + $.cookie("openItem") +
  "`]").addClass("open");
});
</script>

И здесь ничего сложного! Отыскали нужный элемент по идентификатору #accordion, применили к нему возможности плагина. Из опций передали только одну, но в нашем случае необходимую опцию navigation, которой присвоили значение true. Это обеспечит нам открытие нужной секции аккордеона при переходе по ссылке.

На следующем шаге необходимо обрабатывать щелчок мышкой по пункту меню, чтобы поставить соответствующую куку. Что мы и делаем – находим все элементы a внутри li, внутри нашего аккордеона, связываем с ними событие click, по которому будет вызвана функция-обработчик.

Тут нам пригодятся возможности плагина jQuery Cookie. Мы устанавливаем куку с именем openItem, и значением, которое получаем из атрибута href той ссылки, по которой был совершен клик.

И последний шаг – при загрузке страницы мы должны прочитать куку (если она конечно есть) и в соответствии с ее значением «подсветить» нужный пункт меню. Делаем это – ищем нужный пункт меню выбирая элемент a внутри li аккордеона. Но не просто, а значение атрибута href которого соответствует значению, сохраненному в куке.

Знак $ используем потому, что некоторые браузеры возвращают значения атрибута href по разному. Некоторые отдают абсолютный путь, некоторые – относительный. Чтобы исключить эту неоднозначность мы ищем такое значение атрибута href, которое заканчивается одинаково со значением, сохраненным в куке.

Если такая ссылка будет найдена, то с помощью метода addClass мы добавим ей класс open, что заставит ее «покраснеть».

Собственно это все, больше тут рассказывать не о чем…

Вы можете скачать исходный код примера и воспроизвести этот пример на своем сайте.
* – в архиве не содержатся js-файлы, их можно скачать отдельно в разделе Download.

Нам потребуется подключить в раздел HEAD страницы несколько файлов: само собой разумеется библиотеку jQuery jquery-1.2.3.js, файл плагина jquery.treeview.js и если подразумевается работа с cookies – файл jquery.cookie.js

<script type="text/javascript" src="js/jquery-1.2.3.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.treeview.js"></script>

Для того, чтобы сделать из ненумерованного списка древовидное меню в самом простом случае, с настройками по умолчанию, достаточно будет написать только это:

<script type="text/javascript">
$(document).ready(function(){
  $("#selector").treeview();
});
</script>

где #selector – это идентификатор ненумерованного списка, ну а $(document).ready(function(){}); упоминается в каждой статье про jQuery – отслеживается момент готовности объектной модели документа (DOM).

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

HTML-rод тоже не содержит ничего необычного. Пожалуй обращу Ваше внимание на такие моменты:
- если элементу li ненумерованного списка присвоить класс с именем closed, то при первоначальной загрузке этот элемент будет скрыт.
- элементы span с именем класса folder, находящиеся внутри li это папка, внутри которой могут находиться другие папки или пункты меню.
- элементы span с именем класса file, находящиеся внутри li это пункты меню.

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

<script type="text/javascript">
$(document).ready(function(){
  $("#navigation").treeview({
    persist: "location",
    collapsed: true,
    unique: true
  });
});
</script>

Приведу пояснения к этим, и некоторым другим опциям:
animated – принимает строку (slow, normal, fast) или число (миллисекунды), определяющие скорость анимационного
эффекта. Если опция неопределена – эффект отсутствует.

$(".selector").treeview({
   animated: "fast"
});

collapsed – по умолчанию false. Позволяет скрывать все ветви дерева при загрузке страницы, если установлена в true.

$(".selector").treeview({
   collapsed: true
});

unique – по умолчанию false. Если установить в true – устанавливает разрешение на открытие одновременно только одной ветки дерева на соответствующем уровне. Т.е. при открытии одной ветки – скрывает «сестринские» ветки уровня. При начальной загрузке все ветки скрыты.

$(".selector").treeview({
   unique: true
});

toggle – функция, которая будет вызвана в момент переключения веток. Аргумент this ссылается на переключаемый UL элемент (точнее на набор элементов LI, принадлежащих этому UL).

$(".selector").treeview({
   toggle: function() {
   	console.log(this + " переключено!");
   }
});

control – определяет элемент который будет служить управляющим элементов древовидного меню, чтобы позволить пользователю разворачивать, сворачивать или переключать все меню одним кликом.

$(".selector").treeview({
   control: "#container"
});

в примере им служит элемент с идентификатором container.
persist – принимает строку. Варианты: «location» или «cookie». Если установлено в «location» – выбирает активный элемент древовидного меню в location.href.

$(".selector").treeview({
   persist: "location"
});

Если установлено в «cookie» – сохраняет и восстанавливает состояние выбранного элемента древовидного меню в cookie с именем treeview.

$(".selector").treeview({
   persist: "cookie"
});

cookieId – по умолчанию «treeview». Определяет имя cookie, используемое в опции persist.

$(".selector").treeview({
   persist: "cookie",
   cookieId: "navigationtree"
});

Я рассказал далеко не все и привел не все примеры. Для того, кто хочет узнать про этот плагин побольше приведу ссылки. Материалы естественно на английском языке.
http://jquery.bassistance.de/treeview/demo/ – демонстрационная страница плагина.
http://docs.jquery.com/Plugins/Treeview – страница плагина на сайте jQuery.

Как всегда первый шаг – это создание HTML-разметки.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="products.html" id="current">Продукция</a></li>
  <li><a href="gallery.html">Фото</a></li>
  <li><a href="responses.html">Отзывы</a></li>
  <li><a href="feedback.html">Контакты</a></li>
</ul>

Здесь необходимо обратить внимание на пункт, где встречается id=»current». В реально работающем меню необходимо определять текущую страницу при ее загрузке и присваивать этот id соответствующему пункту.

А теперь приведу таблицу стилей для организации этого списка в горизонтальное меню.

ul {
  padding:3px 0;
  margin-left:0;
  border-bottom:1px solid #003;
  font:bold 8pt Verdana, sans-serif;
}
ul li {
  list-style:none;
  margin:0;
  display:inline;
}
ul li a {
  padding:3px 0.5em;
  margin-left:3px;
  border:1px solid #003;
  border-bottom:none;
  background-color:#FFA6BD;
  text-decoration:none;
  color:#AD2039;
}
ul li a:hover {
  background-color:#AD2039;
  color:#FFA6BD;
}
ul li a#current {
  background-color:#fff;
  border-bottom:1px solid #fff;
}

Ничего особенно хитрого тут нет. Сначала зададим отступы и левое поле для элемента ul, там же определяем нижнюю рамку для всего элемента и шрифт, а вот затем начинается более интересное правило. Для ul li мы скрываем стандартные маркеры, полям задаем значение 0 и наконец display:inline; – вот что заставляет наш список «вытянуться» в строку.

Дальше описываем элемент a, задавая ему отступы, поля, рамки, определяя цвет фона и шрифта. Обращу внимание разве что на определения свойства border. Сначала заданы значения свойства border для всех четырех сторон, а в следующей строке мы пишем border-bottom:none;, т.е. отменили рамку снизу. Такой вариант написания вполне имеет право на существование.

Далее определяем стили элемента а при наведении на него указателя мыши – тут мы изменим только цвет фона и цвет текста.

И самое последнее – стили для элемента имеющего id=»current». Цвет фона задаем совпадающим с цветом основного фона страницы, как впрочем и цвет нижней рамки.

Вот, что у нас получилось в итоге.

Итак, приступим. Меню будет представлять собой список, так как и теоретически и практически это наилучший способ структурирования меню. Прежде всего создадим HTML-разметку.

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="about.html">О компании</a></li>
  <li><a href="products.html">Каталог продукции</a></li>
  <li><a href="gallery.html">Фото объектов</a></li>
  <li><a href="responses.html">Отзывы клиентов</a></li>
  <li><a href="scheme.html">Схема проезда</a></li>
  <li><a href="feedback.html">Форма для связи</a></li>
</ul>

Далее приведу файл стилей, который будет подробно прокомментирован.

ul {
  list-style:none;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:0.9em;
  font-weight:bold;
  width:20em;
  border-bottom:1px solid #003;
  border-right:1px solid #003;
  border-left:1px solid #003;
}
ul li {
  border-top:1px solid #003;
}
ul li a {
  display:block;
  padding:2px 2px 2px 0.5em;
  border-left:15px solid #AD2039;
  background-color:#FFA6BD;
  color:#AD2039;
  text-decoration:none;
  width:100%;
}
html > body ul li a {
  width:auto;
}
ul li a:hover {
  border-left:15px solid #FFA6BD;
  background-color:#AD2039;
  color:#FFA6BD;
}

Рассмотрим подробнее стилевое оформление элемента ul. Сначал скроем стандартные маркеры списка, затем установим значения свойств margin и padding (почему мы устанавливаем именно оба свойства можно прочитать в статье «CSS: задание отступов и изменение стилей маркера в списках.»). Свойства font установят нужные шрифты и размер. Свойство width ясное дело будет отвечать за ширину списка. Следующие три строки устанавливают рамку шириной в 1px справа, снизу и слева для элемента ul.

Почему не сверху? Потому, что неплохо иметь такую же тонкую рамку, которая будет отделять каждый элемент списка. Это мы проделаем, написав правило border-top:1px solid #003; для ul li (для всех элементов li, являющихся дочерними по отношению к элементу ul).

В следующем правиле ul li a мы зададим стили ссылок. Поскольку элемент a по умолчанию – это строчный элемент, нам необходимо изменить его отображение, чтобы элементы a отображались как блочные. Это необходимо для того, чтобы можно было использовать меню щелкая мышью на всем выбираемом элементе, а не только на тексте ссылки. Делаем это, задавая свойству display значение block.

Определяем отступы со всех сторон в свойстве padding, задаем рамку слева толщиной в 15px в свойстве border-left, определяем свойства background-color (цвет фона) и color (цвет текста), а также удаляем подчеркивание ссылок, воспользовавшись свойством text-decoration.

Последняя строчка задает теперь уже блочному элементу ширину width в 100%. Это сделано специально для IE, но может создать проблемы в Netscape Navigator и IE для Mac и поэтому следующее правило html>body ul li a написано специально для решения этой проблемы. IE не сможет его прочесть, поскольку не умеет обрабатывать правила для селектора потомка.

И наконец последнее правило будет задавать стили использующиеся при наведении указателя мыши на ссылку. Здесь мы просто задаем другие цвета в свойствах border-left, background-color и color.

Вот как это будет выглядеть. По моему неплохо. Такое меню будет вполне работоспособно и при отключенной поддержке стилевого оформления.

$("#example > ul").tabs();

В общем действительно просто, никаких дополнительных опций не используется. Здесь скорее придется потрудиться над стилевым оформлением навигационной панели. Но стилевое оформление – это другая тема. Давайте испытаем пример и разберемся, как все это работает.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Файлы необходимые для реализации подключаем в раздел HEAD, их всего два – это сама библиотека jQuery и файл ui.tabs.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>

Стилевые таблицы упомяну вскользь, целиком их можно посмотреть в файле примера. Здесь можно творить, что душе угодно, не забывая проверить созданную Вами таблицу на совместимость с различными браузерами. Правда есть одно важное замечание: файл ui.tabs.js использует имена классов стилевой таблицы, поэтому, если Вы захотите использовать другие имена, Вам понадобится исправить и файл ui.tabs.js

Что касается HTML-кода – он тоже довольно прост. Если посмотрите исходные коды примера, то обязательно отметите, как четко он структурирован. Отдельно идет ненумерованный список разделов, отдельно блоки с содержимым разделов. В таком коде удобно разбираться, его удобно править при необходимости.

А вот интересующий нас более всего код, приведу без сокращений:

<script type="text/javascript">
$(document).ready(function(){
$("#menu > ul").tabs({
	fxFade: true,
	fxSpeed: slow
});
</script>

Как обычно все «завернуто» в $(document).ready(function(){…}); Дальше все так же просто, как и написано у разработчиков. Просто мы добавили еще пару опций.
fxFade: true – используем функцию «затухания» при переходе на другую вкладку.
fxSpeed: slow – и скорость этого затухания – медленная…
Это конечно далеко не все возможные опции. Наш горизонтальный список может реагировать на события click (щелчок по вкладке), hide (при скрытии вкладки), show (при открытии вкладки) выполнением пользовательских функций. Может переключаться не по клику мышкой, а по event: mouseover, можно задавать открывающуюся по умолчанию вкладку и конечно же во вкладки можно подгружать содержимое используя Ajax. Но о том, как просто работать с Ajax через jQuery я расскажу в отдельной статье.

Буду благодарен, если найдете возможность оставить свои отзывы…

$("#menuList").sortable();

где #menuList – это идентификатор списка.
В меню справа использованы некоторые дополнительно установленные опции. Код конечно немного посложнее, но и в нем нет абсолютно ничего страшного.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

А теперь разберем примеры более подробно. Этот пример для своей корректной работы требует подключения достаточно большого количества различных вспомогательных файлов.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.mouse.js" type="text/javascript"></script>
<script src="js/ui.draggable.js" type="text/javascript"></script>
<script src="js/ui.draggable.ext.js" type="text/javascript"></script>
<script src="js/ui.droppable.js" type="text/javascript"></script>
<script src="js/ui.droppable.ext.js" type="text/javascript"></script>
<script src="js/ui.sortable.js" type="text/javascript"></script>

Все файлы уже знакомы по предыдущим примерам. Добавился только один файл ui.sortable.js, который (как и все остальные) мы подключаем в разделе HEAD нашей страницы.
Из таблицы стилей остановлюсь только на небольшом моменте, поскольку это по большому счету дело вкуса.

.dragStyle {
  background:#CFD4E6;
  border:1px solid #727EA3;
}

Класс dragStyle используется во втором примере и применяется в момент перемещения элемента, отображая то место, на которое перемещаемый элемент будет «сброшен».

Далее полностью приведен кусок кода, который и отвечает за работу обоих списков.

<script type="text/javascript">
$(document).ready(function(){
  $("#menuList").sortable(); // 1-ый спискок

  $("#menuList2").sortable({ // 2-ой список
	hoverClass: "dragStyle",
	start: function(ev, ui) {
	  var text = $(ui.draggable.element).text();
	  $("#result").text("Перемещаем " + text);
	},
	stop: function(ev, ui) {
	  $("#result").text("Перемещение окончено!");
	}
  });
});
</script>

Вот так просто. За работу первого списка отвечает всего-навсего одна строка кода. Для второго списка мы используем некоторые дополнительные опции.
hoverClass – опция содержит название класса, который будет применен в процессе перемещения одного из пунктов списка, чтобы указать место, куда перемещаемый пункт будет «сброшен».
start – здесь указываем функцию, которая выполнится в момент старта перемещения элемента списка. В этой функции мы обращаемся к перемещаемому элементу, получаем его содержимое в виде текста и записываем в переменную text. Затем отыскиваем элемент #result и вставляем текст туда.
stop – указываем функцию, которая выполнится в момент, когда произошел «сброс» элемента на нужную позицию (независимо от того изменилась ли фактическая позиция элемента). Тут тоже все предельно просто – вставляем текст сообщения в элемент #result.

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

Буду рад, если найдете возможность оставить свой комментарий или задать вопросы.

Посмотрите эти два примера. Пример слева срабатывает по щелчку мышью на панельке-заголовке и имеет довольно интересный эффект «прыгающего мячика», когда панелька падает вниз. Пример справа срабатывает при наведении указателя мыши на панель-заголовок. Тут применен эффект по умолчанию – простое скольжение.

Жалко только, что как всегда в браузере названИЕкоторого Вы знаете без меня, все это выглядит не так прилично как в остальных. Ну, если немного помучаться с CSS, наверняка можно привести все к единообразию).

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Как всегда, нам потребуется подключить саму библиотеку и еще пару-тройку небольших файлов в раздел HEAD.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.accordion.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>

Сначала подключаем саму библиотеку, затем файл jquery.dimensions.js (он нам уже знаком – отвечает за работу с размерами элементов). Интересный нам файл ui.accordion.js – именно он обеспечивает работу аккордеона. Файл jquery.easing.js понадобится только в том случае, если Вы решите использовать анимацию, отличную от той, что установлена по умолчанию.

HTML и CSS-код приводить не имеет смысла, поскольку он настолько прост, что пояснений не требует. Посмотреть его Вы всегда сможете в исходном коде примера. Не забывайте только, что тот маленький скрипт, код которого я приведу ниже, обращается к элементам по их идентификаторам.

Итак код:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").accordion({
     animated: "bounceslide"
  });
  $("#example2").accordion({
    event: "mouseover"
  });
});
</script>

И это все! Мы написали оба аккордеона!
Как всегда весь код обернут в $(document).ready(function(){ … }); Для первого аккордеона выбран элемент с id #example, для второго соответственно #example2. В опции animated первого аккордеона мы (пользуясь тем, что подключили файл jquery.easing.js) задали интересный эффект, а в опции event второго аккордеона указали на то, что срабатывать он должен по событию mouseover.

Собственно мы могли поступить еще проще и написать вот так:

$("#example").accordion();

и такой код прекрасно работал бы, потому, что в файле ui.accordion.js задаются опции по умолчанию.
По умолчанию там заданы опции animated: slide и event: click, а также очень интересная опция autoheight: true. В примере, появляющиеся окошки для отображения контента всегда одинаковы и высота определяется по блоку с максимальным содержимым. Если же опцию autoheight установить в false, высота будет разная.

Полный список опций можно отыскать на сайте разработчика. Удачи и юзайте jQuery!