/*!
* jquery.ui.potato.menu
*
* Copyright (c) 2009-2010 makoto_kw, http://www.makotokw.com
* Licensed under the MIT license.
*
* @author makoto_kw
* @version 1.1
*/
(function ($) {
var defaults = {
vertical: false,
menuItemSelector: 'li',
menuGroupSelector: 'ul',
rootClass: 'potato-menu',
menuItemClass: 'potato-menu-item',
menuGroupClass: 'potato-menu-group',
verticalClass: 'potato-menu-vertical',
holizontalClass: 'potato-menu-holizontal',
hasVerticalClass: 'potato-menu-has-vertical',
hasHolizontalClass: 'potato-menu-has-holizontal',
hoverClass: 'potato-menu-hover',
showDuration: 350,
hideDuration: 100
}
function menu() {
var option = (typeof (arguments[0]) != 'string') ? $.extend(defaults, arguments[0]) : $.extend(defaults, {});
var $menu = $(this).addClass(option.rootClass + ' ' + option.menuGroupClass).addClass((option.vertical) ? option.verticalClass : option.holizontalClass);
var $menuItems = $menu.find(option.menuItemSelector).addClass(option.menuItemClass);
var $menuGroups = $menu.find(option.menuGroupSelector).addClass(option.menuGroupClass);
$menuItems.hover(
function (e) {
$(this).addClass(option.hoverClass);
},
function (e) {
$(this).removeClass(option.hoverClass);
}
);
$menuGroups.parent().each(function (index) {
var $parentMenuItem = $(this); // menu item that has menu group
var displayDirection = ($parentMenuItem.parent().hasClass(option.holizontalClass)) ? 'bottom' : 'right';
$parentMenuItem.addClass((displayDirection == 'bottom') ? option.hasVerticalClass : option.hasHolizontalClass);
var $menuGroup = $parentMenuItem.find(option.menuGroupSelector + ':first').addClass(option.verticalClass);
$parentMenuItem.hover(
function (e) {
var offset = (displayDirection == 'bottom') ? {left: '0', top: ''} : {
left: $(this).width() + 'px',
top: '0'
};
$menuGroup.css({left: offset.left, top: offset.top}).fadeIn(option.showDuration);
},
function (e) {
$menuGroup.fadeOut(option.hideDuration);
}
);
});
$menu.find('a[href^="#"]').click(function () {
$menuGroups.fadeOut(option.hideDuration);
return ($(this).attr('href') != '#');
})
return this;
}
$.fn.extend({
ptMenu: menu
});
})(jQuery);