SUPERFISH – ВЫПАДАЮЩЕЕ МЕНЮ РАБОТАЮЩЕЕ НА CSS

By | 04.12.2012

Всем добрый день! Сегодня мы поговорим как сделать анимированное меню для Вашего сайта. А поможет нам в этом уважаемая Суперрыба (Superfish).

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

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

УСТАНОВКА

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

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

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

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

НАСТРОЙКА

Параметры:
ПАРАМЕТР ЗНАЧЕНИЕ ПО УМОЛЧАНИЮ ОПИСАНИЕ
 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(){}  Пользовательская функция вызываемая при скрытии подменю

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Category: CSS Метки:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.