Создаем выпадающее меню с использованием плагина jquery superfish

Superfish является плагином jQuery, который работает также на чистом CSS (то есть грациозно деградирует при отсутствии javascript), при этом плагин superfish обладает следующими преимуществами:

• Поддержка сенсорных устройств. Android, iOS, Windows Phone 7 и IE10 (с сенсорным экраном), первое прикосновение откроет ассоциированное подменю, по второму прикосновению сработает переход по ссылке. Мышка и клавиатура работают как обычно. Отметьте, что сейчас требуется подключать hoverintent плагин для поддержки некоторых Android браузеров и сенсорного взаимодействия в IE10. Ситуация может поменяться.
• Временной отрезок на тот случай, если курсор мышки непроизвольно дергается. По умолчанию стоит 800 миллисекунд.
• Поддержка плагина hoverintent. Superfish автоматически определяет наличие плагина hoverintent и использует его технологии для mouseover (задержка при mouseout срабатывает независимо от наличия плагина hoverintent). На всех примерах этой страницы используется hoverintent. Если по каким-то причинам вы захотите использовать плагин hoverintent на ваших страницах, но не в связке с Superfish, то установить опцию disableHI в true. Отметьте: по состоянию на v.1.5.1 вы должны использовать обновленную версию (r7) hoverintent, которое поддерживает событие делегирования (delegation).
• На наличие подменю указывают css стрелки, классы добавляются соответствующим ссылкам. Вы можете отключить стрелки через опцию cssArrows, если потребуется.
• Можете указать путь к текущей странице, в том случае, если меню не используется. Чтобы понять как это работает можно просмотреть nav-bar пример. Отметьте, вам потребуется добавить класс ‘current’ к соответствующим элементам, идеально на серверной стороне.
• Опционально вы можете использовать функции обратного вызова. Эти функции позволяют улучшать и расширять функциональность, без необходимости изменять код ядра Superfish.
• Поддерживает открытые методы hide и show, которые вы можете вызывать на элементы списка, которые имеют дочерние подменю. Также есть метод для утилизации Superfish. Здесь пример страницы, где демонстрируются вышеописанные методы.
• Используется делегирование событий для лучшей производительности и гибкости.
• Анимация. По умолчанию используется fade, но также можно использовать пользовательскую анимацию.

Руководство по быстрому старту для плагина superfish

• Начните с создания выпадающего меню на чистом CSS с вложенными неупорядоченными списками. Для каждого вашего селектора li:hover добавьте эквивалентный li.sfHover (класс добавляется к элементу li при наведении на него мышки) селектор. Чтобы спрятать подменю используйте display:none. Чтобы сделать этот шаг проще можете воспользоваться кроссбраузерным css-файлом, просто скачайте его в соответствующем разделе сайта.
  

  HTML

  <link href="/superfish.css" rel="stylesheet" media="screen">

• Прикрепите файл superfish.js после файла с библиотекой jQuery в вашем теге head.

  HTML

  <script src="jQuery.js"></script>
  <script src="superfish.js"></script>

• Вызовите superfish().

  jQuery

      jQuery(document).ready(function() {
          jQuery('ul.sf-menu').superfish();
      });

• Существует много опций для настройки вашего меню. Вы можете найти большинство опций в примерах на сайте.

Примеры меню с использованием плагина jquery superfish

Базовое выпадающее меню

HTML

<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="/superfish.css">

<!-- link to the JavaScript files (hoverIntent is optional) -->
<!-- if you use hoverIntent, use the updated r7 version (see FAQ) -->
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

<!-- initialise Superfish -->
<script>

    jQuery(document).ready(function(){
        jQuery('ul.sf-menu').superfish();
    });

</script>

Вертикальное меню

HTML

<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="/superfish.css">
<link rel="stylesheet" media="screen" href="/superfish-vertical.css">

<!-- link to the JavaScript files (hoverIntent is optional) -->
<!-- if you use hoverIntent, use the updated r7 version (see FAQ) -->
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

<!-- initialise Superfish -->
<script>

    jQuery(document).ready(function(){
        jQuery('ul.sf-menu').superfish({
            animation: {height:'show'}, // slide-down effect without fade-in
            delay:       1200           // 1.2 second delay on mouseout
        });
    });

</script>

nav-bar меню

HTML

<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="/superfish.css">
<link rel="stylesheet" media="screen" href="/superfish-navbar.css">

<!-- link to the JavaScript files (hoverIntent is optional) -->
<!-- if you use hoverIntent, use the updated r7 version (see FAQ) -->
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

<!-- initialise Superfish -->
<script>

    jQuery(document).ready(function(){
        jQuery('ul.sf-menu').superfish({
            pathClass:  'current'
        });
    });

</script>

Опции плагина superfish

По умолчанию:

jQuery

$.fn.superfish.defaults = {
  popUpSelector: 'ul,.sf-mega',      // selector within menu context to define the submenu element to be revealed
  hoverClass:    'sfHover',          // the class applied to hovered list items
  pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page
  pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass
  delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing
  animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open
  animationOut:  {opacity:'hide'},   // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed
  speed:         'normal',           // speed of the opening animation. Equivalent to second parameter of jQuery’s .animate() method
  speedOut:      'fast',             // speed of the closing animation. Equivalent to second parameter of jQuery’s .animate() method
  cssArrows:     true,               // set to false if you want to remove the CSS-based arrow triangles
  disableHI:     false,              // set to true to disable hoverIntent detection
  onInit:        $.noop,             // callback function fires once Superfish is initialised – 'this' is the containing ul
  onBeforeShow:  $.noop,             // callback function fires just before reveal animation begins – 'this' is the ul about to open
  onShow:        $.noop,             // callback function fires once reveal animation completed – 'this' is the opened ul
  onBeforeHide:  $.noop,             // callback function fires just before closing animation – 'this' is the ul about to close
  onHide:        $.noop,             // callback function fires after a submenu has closed – 'this' is the ul that just closed
  onIdle:        $.noop,             // callback function fires when the 'current' submenu is restored (if using pathClass functionality)
  onDestroy:     $.noop              // callback function fires after the 'destroy' method is called on the menu container
};

Переопределяем параметры плагина superfish:

Вы можете перекрыть эти опции, передав объект методу Superfish при инициализации. Например:

HTML

//link to the CSS files for this menu type
<link rel="stylesheet" media="screen" href="/superfish.css">

// link to the JavaScript files (hoverIntent is optional)
// if you use hoverIntent, use the updated r7 version (see FAQ)
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

// initialise Superfish
<script>

    jQuery(document).ready(function() {
        jQuery('ul.sf-menu').superfish({
            delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation
            speed:       'fast',                          // faster animation speed
            autoArrows:  false                            // disable generation of arrow mark-up
        });
    });

</script>

Официальная страничка плагина

Плагин Superclick

Плагин superclick обладает многими особенностями Superfish и заимствует весь CSS. Однако Superclick фокусируется лишь на событие клика для открытия и закрытия подменю. Отметьте, ссылки на соответствующие подменю не ведут на новую страницу, они будут просто переключать видимость подменю.

Особенности использования плагина superclick:

• Опции, связанные с hover, опущены в Superclick
• Опция hoverClass заменена на activeClass
• Нет необходимости подключать плагин hoverintent

Пример использования: вместо

jQuery

/*
    $('ul.menu').superfish({
        cssArrows:     false
    });
*/

используйте

jQuery

$('ul.menu').superclick({

});

Документация на github