Знакомьтесь, “phatfusion” - раздвижное меню из картинок на mootools
Это меню реализует известный среди web-дизайнеров kwicks-эффект. При проведении мышью над любым пунктом меню последний плавно увеличивается в ширину. Другие пункты плавно сжимаются, что создает нужный акцент на соответствующем пункте меню.
Если пользователь уже выбрал пункт меню - оно не схлопывается до тех пор, пока не будет выбран другой или же не будет повторного щелчка по этому пункту. Таким образом первый клик открывает пункт, второй клик - закрывает.
Использование
var myMenu = new ImageMenu('imageMenu', {
openWidth:310,
onOpen:function(e,i){console.log(e)}
});
Параметры
onOpen
функция, которой передается управление, когда пользователь щелкает по пункту меню. Если внутри li есть href, то он передается в эту функцию.
a function to execute when an item is clicked open. If there is an href within the li then that is passed to the function.
onClose
То же самое, что выше, только при щелчке, закрывающем меню
openWidth
Ширина в пикселях пункта меню в момент проведения мыши над ним. По умолчанию - 200
transition
Тип плавного перехода. По умолчанию
default: Fx.Transitions.quadOut
duration
Продолжительность перехода. По умолчанию: 400
open
id пункта меню, который открыт изначально.По умолчанию: null
border
Ширина подсвечивающей рамки в пикселяхкогда пункт меню раскрыт. По умолчанию: 0
Кросс-браузерность
Firefox 2 (mac / pc)
IE 7
IE 6
Safari (mac)
Фрэймворк
mootools v1.11
