Mobile Menu

by dledle2

HTML

<ul id="myNav">
    <li><a href="#">My Link</a>
        <ul>
            <li><a href="#">My Sub Link 1 </a>
                <ul>
                    <li><a href="#">My Sub Sub Link under 1</a></li>
                </ul>
            <li><a href="#">My Sub Link 2 </a>
                <ul>
                    <li><a href="#">My Sub Sub Link under 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript

;(function ( $, window, undefined ) {
    var pluginName = 'mobileMenu',
    document = window.document,
    defaults = {
        /**
         * Use a sliding effect.
         */
        slideEffect:true,
        /**
         * Slide top of browser to currently selected item.
         */
        scrollTo:true,
        scrollCntr:"html, body",
        scrollToEasing:true,
        duration:400,
        //once the 'open' transition has started
        onOpenStart:function(listItem) {},
        /**
         * once the 'close' transition has started
         * only called when item is toggled closed
         **/
        onCloseStart:function(listItem) {},
        /**
         * This event is called for after each
         * item is opened. Contextual method
         * called for each ul being opened.
         */
        onOpen:function(listItem) {},
        /**
         * This event is called for after each
         * item is closed. Contextual method
         * called for each ul being closed.
         */
        onClose:function(listItem) {}
    };
    var privateMethods = {
        onClose:function(el, o) {
            o.onClose(el.parent('li').find('> a'));
        },
        scrollTo:function(el, o) {
            if (o.scrollTo) {
                // get top coordinate to scroll to
                var top = el.parent('li').position().top - $(o.scrollCntr).find('*:first-child').position().top;
                if (o.scrollToEasing) $(o.scrollCntr).animate({ scrollTop: top }, o.duration);
                else $(o.scrollCntr).scrollTop(top);
            }
            o.onOpen(el.parent('li').find('> a'));
        },
        execute: function(action, id, callback) {
            if ($(id).length) {
                var o  = $(id).data('options');
                if('close' === action) {
                    if (o.slideEffect) $(id).find('ul').removeClass('active').slideUp(o.duration, function(){privateMethods.onClose($(this), o)});
                    else...