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

Скачать

Описание

Superfish расширяет возможности выпадающего css меню добавляя следующие возможности

  • Поддержка hover в ie6.  По умолчанию добавляется класс sfHover, но это меняется в настройках
  • Задержка скрытия меню по событию mouseout. Задержка задана в 800 миллисекунд, что предотвращает скрытие меню при случайном перемещение мыши за его пределы
  • Анимированное появление подменю. По умолчанию используется эффект fade-in (плавное изменение прозрачности), но можно изменить в настройках
  • Управление меню с клавиатуры. Можно вызвать нужный пункт нажимая tab
  • Поддержка плагина hoverIntent. Автоматически определяется наличие этого плагина и если он найден, то используется продвинутое поведение для mouseovers (задержка по событию mouseout остается в любом случае ). На странице с примерами используется плагин hoverIntent. Если на странице используется hoverIntent, но для меню вы не хотите его применять, то необходимо передать параметр disableHI : true
  • Отмечает наличие подменю автоматически добавляя картинку со стрелкой в родительский пункт. Можно убрать стрелочку через параметр autoArrows
  • Падающая тень во всех браузерах, которые поддерживают этот эффект. Не работает в ie6
  • Сохраняет путь текущей открытой позиции. Смотрите пример навигация в виде закладок
  • Поддержка callback функций

Установка

Начать нужно с простого CSS выпадающего меню Suckerfish. Чтобы упростить работу, вы можете скачать css с примерами различных меню.

Подключите файл jQuery и superfish.js

1
<script type="text/javascript" src="superfish.js"></script>

Вызовите superfish() и передайте в него родительский элемент ul.

1
2
3
$(document).ready(function() {
   $('ul.sf-menu').superfish();
});

Настройка

Параметры:

  • параметр
    значение по умолчанию
    описание
  • hoverClass
    ‘sfHover’
    Класс присваивается элементу меню на который наведен курсор
  • pathClass
    ‘overideThisToUse’
    Класс присваивается элементам списка, определяющим путь к открытому пункту
  • pathLevels
    1
    Число пунктов подменю которые остаются открытыми или будут восстановлены используя pathClass
  • delay
    800
    Задержка в миллисекундах перед скрытием подменю после того как курсор будет убран
  • animation
    {opacity:’show’}
    Объект эквивалентный первому параметру метода jQuery .animate()
  • speed
    ‘normal’
    Скорость анимации. эквивалентно второму параметру метода jQuery .animate()
  • autoArrows
    true
    Если true, то стрелка указывающая наличие подменю будет показана
  • dropShadows
    true
    Показывает тень у подменю
  • disableHI
    false
    При true авто определение наличия hoverIntent отключено
  • onInit
    function(){}
    Пользовательская функция, вызываемая один раз при инициализации плагина
  • onBeforeShow
    function(){}
    Пользовательская функция, вызываемая перед запуском анимации
  • onShow
    function(){}
    Пользовательская функция, вызываемая по завершению анимации
  • onHide
    function(){}
    Пользовательская функция вызываемая при скрытии подменю

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// ссылка на CSS файл для меню
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> 
// подключение скриптов (hoverIntent не обязателен)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script> 
// инициализация Superfish
<script type="text/javascript"> 
$(document).ready(function() {
   $('ul.sf-menu').superfish({
      delay:       1000,                            // задержка в миллисекунду
      animation:   {opacity:'show',height:'show'},  // fade-in и slide-down анимация
      speed:       'fast',                          // увеличение скорости анимации
      autoArrows:  false,                           // отключает стрелку подменю
      dropShadows: false                            // отключает тень
   });
 });
</script>

  1. Mihalihc :

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

    [Ответить]

  2. good :

    статья и правда хорошая, жаль не все понятно
    но суть не в этом, подскажите пожалуйста, как правильно установить это суперфиш меню…

    [Ответить]

    AlexSol отвечает:

    1/ Со страницы http://users.tpg.com.au/j_birch/plugins/superfish/#download скачайте необходимые файлы.
    2/ Как подключить – смотрите исходный код страницы http://users.tpg.com.au/j_birch/plugins/superfish/example.html

    [Ответить]

    good отвечает:

    Нужно мне горизонтальное меню.. jQuery подключаю,это – «Вызовите superfish() и передайте в него родительский элемент ul.»-я так понимаю надо вставлять в том же документе, где подключался джиквери в начале меню?..
    а вот проблема с тем, куда вставлять сами таблицы с меню
    не совсем прямые руки еще)..

    [Ответить]

  3. tv :

    Жаль нет описания в каких файлах, что исправлять
    чтобы грамотно изменить размеры всех менюшек.
    Руками онли?

    [Ответить]

  4. Agafik :

    Статья может быть и хорошая, но н совсем понятная.
    Я уже сотни раз в описаниях видел, подключите ту функцию, подключите эту функцию.
    И хоть бы один написал в каком файле её подключать?
    Нужно бырать файл mod_superfishmenu.php
    Который распологается в /modules/mod_superfishmenu
    Или в файл index.php который лежит в корне сайта?

    Что значит «Вызовите superfish() и передайте в него родительский элемент ul.»
    С бубном вокруг компьютера, суперфищ приди????? Или нужно что то в какой то фал засунуть, и что то где то запустить. Если уже беретесь делать мануал, дак делаете его до конца.
    Я думаю, люди которые разбираются, этот мануал не читают, а котороые не разбираются. Им не понятно.

    [Ответить]

    AlexSol отвечает:

    .php – это серверные скрипты и к данной статье никакого отношения не имеют.
    если вы используете какую-то cms – смотри к ней документацию, обычно шаблоны вывесены в отдельный файл /не index.php/

    пример вызова меню с подключением всех необходимых скриптов есть в конце статьи

    [Ответить]

Оставьте свой комментарий