Открыть меню    

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

плагин 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

Комментарии к статье

Добавить комментарий