Всем добрый день! Сегодня мы поговорим как сделать анимированное меню для Вашего сайта. А поможет нам в этом уважаемая Суперрыба (Superfish).
Superfish расширяет возможности выпадающего css меню добавляя следующие возможности:
- Поддержка hover в ie6. По умолчанию добавляется класс sfHover, но это меняется в настройках
- Задержка скрытия меню по событию mouseout. Задержка задана в 800 миллисекунд, что предотвращает скрытие меню при случайном перемещение мыши за его пределы
- Анимированное появление подменю. По умолчанию используется эффект fade-in (плавное изменение прозрачности), но можно изменить в настройках
- Управление меню с клавиатуры. Можно вызвать нужный пункт нажимая tab
- Поддержка плагина hoverIntent. Автоматически определяется наличие этого плагина и если он найден, то используется продвинутое поведение для mouseovers (задержка по событию mouseout остается в любом случае ). На странице с примерами используется плагин hoverIntent. Если на странице используется hoverIntent, но для меню вы не хотите его применять, то необходимо передать параметр disableHI : true
- Отмечает наличие подменю автоматически добавляя картинку со стрелкой в родительский пункт. Можно убрать стрелочку через параметр autoArrows
- Падающая тень во всех браузерах, которые поддерживают этот эффект. Не работает в ie6
- Сохраняет путь текущей открытой позиции. Смотрите пример навигация в виде закладок
- Поддержка callback функций
УСТАНОВКА
- cо страницы http://users.tpg.com.au/j_birch/plugins/superfish/#download скачайте необходимые файлы.
- как подключить – смотрите исходный код страницы http://users.tpg.com.au/j_birch/plugins/superfish/example.html
Начать нужно с простого CSS выпадающего меню Suckerfish. Чтобы упростить работу, вы можете скачать css с примерами различных меню.
Подключите файл jQuery и superfish.js
<script type="text/javascript" src="superfish.js"></script>
Вызовите superfish() и передайте в него родительский элемент ul.
$(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(){} | Пользовательская функция вызываемая при скрытии подменю |
// ссылка на 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>