RSS Git Download  Clone
Raw Blame History
/*!
 * 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);