Сегодня я хочу Вам рассказать о том, как правильно подключить и настроить отличное выпадающее меню от Filament Group.

Для начала несколько примеров на сайте разработчика.
Красиво, стильно, функционально, хотите такое?

Итак, изначально меню называлось IPod style и выглядело соответственно. Однако разработчики продолжили совершенствовать свой продукт и на сегодняшний день меню доступно в четырех вариантах
— простой выпадающий список без вложенности (flat);
— выпадающий список с вложенностью (flyout), в этом случае раскрытие вложенных пунктов происходит вправо от родителя;
— стиль IPod (без хлебных крошек);
— стиль IPod c хлебными крошками, для более легкой навигации по обширному меню, в этом случае всегда видно где в данный момент мы находимся;

Что нужно для работы
— библиотека jQuery.js
— файл стилей от jQueryUI, с картинками, выбрать и скачать можно здесь

Как получить
Идем на сайт и скачиваем архив примера с текущей версией, распаковываем в произвольную папку на своем компьютере. Из всего что там есть нам понадобятся
файл стилей fg.menu.css и сам скрипт fg.menu.js.

На странице где будем создавать наше меню подключаем сначала файлы стилей:

<link rel="stylesheet" href="/css/fg.menu.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/css/query-ui-1.8.custom.css" type="text/css" media="screen" charset="utf-8" />

не забываем положить в нужное место необходимые картинки от UI,
потом скрипты:

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

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

<!-- styles for this example page only -->
    <style type="text/css">
     .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
    
    .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
    .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
    a.fg-button { float:left;  }
    button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
    
    .fg-button-icon-left { padding-left: 2.1em; }
    .fg-button-icon-right { padding-right: 2.1em; }
    .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
    .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
    .fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }     /* solo icon buttons must have block properties for the text-indent to work */    
    
    .fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
    </style>

Как работает
Мы будем «привязывать» данное меню к ссылке, для нее нужно прописать обязательные атрибуты, смотрим:

<a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy">
    <span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu</a>

Структуру меню определяем списками и размещаем сразу за ссылкой в скрытом слое, обращаем внимание на атрибут id, он должен быть равен атрибуту href нашей ссылки (без #).

Простое меню:

<div id="news-items" class="hidden">
<ul>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
</ul>
</div>

Меню с вложениями:

<div id="news-items" class="hidden">
<ul>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a></li>
  <li><a href="#">Menu option</a>
    <ul>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
      <li><a href="#">Child menu option</a></li>
    </ul>
  </li>
  <li><a href="#">Menu option</a></li>
</ul>
<div>

Покончили с НTML разметкой :) теперь самое интересное

<script>
$(document).ready(function (){
    // BUTTONS FOCUS
        $('.fg-button').hover(
            function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
            function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
        );

   // MENU
    $('#hierarchy').menu({
            content: $('#hierarchy').next().html(), // grab content from this page
            showSpeed: 400
        });
});
</script>

Вуаля! смотрим, балдеем…
Однако, при выборе нужного пункта ничего не происходит, исправляем на нужное нам действие. Открываем fg.menu.js ищем строку 244, видим что разработчики предусмотрительно закомментировали переход по ссылке пункта меню, исправляем вот так (конечно если вам нужен переход по ссылке):

this.chooseItem = function(item){
        menu.kill();
        // edit this for your own custom function/callback:
        //$('#menuSelection').text($(item).text());    
         location.href = $(item).attr('href');
};

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

Итоги
Что для меня есть плюс:
-интерфейс, куча скинов, красиво
-возможность переопределить действие при выборе пункта меню
-гибкий механизм получения самого меню, хоть подтягивай ajax-ом
вот так:

$.get('menuContent.html', function(data){ // grab content from another page
            $('#flyout').menu({ content: data, flyOut: true });
        });

-несколько экземпляров на странице

Что минус:
-для новичка проблемно сходу разобраться со всеми этими стилями от UI, но мы то не новички, хе-хе…

Прошу сильно не пинать! Первый пост в данной теме, принимаю замечания :)