mmenu not working even with the sample code

idelara picture idelara · Jan 28, 2014 · Viewed 7k times · Source

I am trying to integrate the mmenu to a mobile website I am currently developing with jQuery and jQuery Mobile but I cant seem to make it run even with the most basic code as explained in the documentation.

Here is my entire code index.html:

<html>
<head>
   <link type="text/css" rel="stylesheet" media="all" href="mmenu.css" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.mmenu.js"></script>
   <script type="text/javascript">
        $(document).ready(function(){
            $("#navig").mmenu({
            searchfield : true,
            counters : true
            });
        });
   </script>
</head>
<body>
    <div> <!-- the wrapper -->
        <nav id="navig">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about/">About us</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
        </nav>
        <div id="header">
         <h4>Header Title</h4>
        </div>
        <div id="content">
            <p>Lorem Ipsum</p>
        </div>
        <div id="footer">
            <span><a href="#contact">Contact</a></span>
        </div>
    </div>
</body>
</html>

An interesting note is that while looking in the src folder, I did not see a file called just "mmenu.css" but I found jquery.mmenu.css, which I assumed was the one to be included and then I renamed it to mmenu.css and included it.

This is the output I get while opening index.html

Header Title

Lorem Ipsum

Contact

Does anybody know why I cant run it? Yes, I've read the whole documentation and tried a bunch of different things, but nothing seems to run.

Thank you very much in advance!

Cheers.


EDIT: jquery.mmenu.js :

/*  
 * jQuery mmenu v4.1.8
 * @requires jQuery 1.7.0 or later
 *
 * mmenu.frebsite.nl
 *  
 * Copyright (c) Fred Heusschen
 * www.frebsite.nl
 *
 * Dual licensed under the MIT and GPL licenses.
 * http://en.wikipedia.org/wiki/MIT_License
 * http://en.wikipedia.org/wiki/GNU_General_Public_License
 */


(function( $ ) {

    var _PLUGIN_    = 'mmenu',
        _VERSION_   = '4.1.8';


    //  Plugin already excists
    if ( $[ _PLUGIN_ ] )
    {
        return;
    }

    //  Global variables
    var glbl = {
        $wndw: null,
        $html: null,
        $body: null,
        $page: null,
        $blck: null,

        $allMenus: null,
        $scrollTopNode: null
    };

    var _c = {}, _e = {}, _d = {},
        _serialnr = 0;


    $[ _PLUGIN_ ] = function( $menu, opts, conf )
    {
        glbl.$allMenus = glbl.$allMenus.add( $menu );

        this.$menu = $menu;
        this.opts  = opts
        this.conf  = conf;

        this.serialnr = _serialnr++;

        this._init();

        return this;
    };

    $[ _PLUGIN_ ].prototype = {

        open: function()
        {
            this._openSetup();
            this._openFinish();
            return 'open';
        },
        _openSetup: function()
        {
            //  Find scrolltop
            var _scrollTop = findScrollTop();

            //  Set opened
            this.$menu.addClass( _c.current );

            //  Close others
            glbl.$allMenus.not( this.$menu ).trigger( _e.close );

            //  Store style and position
            glbl.$page
                .data( _d.style, glbl.$page.attr( 'style' ) || '' )
                .data( _d.scrollTop, _scrollTop )
                .data( _d.offetLeft, glbl.$page.offset().left );

            //  Resize page to window width
            var _w = 0;
            glbl.$wndw
                .off( _e.resize )
                .on( _e.resize,
                    function( e, force )
                    {
                        if ( force || glbl.$html.hasClass( _c.opened ) )
                        {
                            var nw = glbl.$wndw.width();
                            if ( nw != _w )
                            {
                                _w = nw;
                                glbl.$page.width( nw - glbl.$page.data( _d.offetLeft ) );
                            }
                        }
                    }
                )
                .trigger( _e.resize, [ true ] );

            //  Prevent tabbing out of the menu
            if ( this.conf.preventTabbing )
            {
                glbl.$wndw
                    .off( _e.keydown )
                    .on( _e.keydown,
                        function( e )
                        {
                            if ( e.keyCode == 9 )
                            {
                                e.preventDefault();
                                return false;
                            }
                        }
                    );
            }

            //  Add options
            if ( this.opts.modal )
            {
                glbl.$html.addClass( _c.modal );
            }
            if ( this.opts.moveBackground )
            {
                glbl.$html.addClass( _c.background );
            }
            if ( this.opts.position != 'left' )
            {
                glbl.$html.addClass( _c.mm( this.opts.position ) );
            }
            if ( this.opts.zposition != 'back' )
            {
                glbl.$html.addClass( _c.mm( this.opts.zposition ) );
            }
            if ( this.opts.classes )
            {
                glbl.$html.addClass( this.opts.classes );
            }

            //  Open
            glbl.$html.addClass( _c.opened );
            this.$menu.addClass( _c.opened );

            //  Scroll page to scrolltop
            glbl.$page.scrollTop( _scrollTop );

            //  Scroll menu to top
            this.$menu.scrollTop( 0 );
        },
        _openFinish: function()
        {
            var that = this;

            //  Callback
            transitionend( glbl.$page,
                function()
                {
                    that.$menu.trigger( _e.opened );
                }, this.conf.transitionDuration
            );

            //  Opening
            glbl.$html.addClass( _c.opening );
            this.$menu.trigger( _e.opening );

            //  Scroll window to top
            window.scrollTo( 0, 1 );
        },
        close: function()
        {
            var that = this;

            //  Callback
            transitionend( glbl.$page,
                function()
                {
                    that.$menu
                        .removeClass( _c.current )
                        .removeClass( _c.opened );

                    glbl.$html
                        .removeClass( _c.opened )
                        .removeClass( _c.modal )
                        .removeClass( _c.background )
                        .removeClass( _c.mm( that.opts.position ) )
                        .removeClass( _c.mm( that.opts.zposition ) );

                    if ( that.opts.classes )
                    {
                        glbl.$html.removeClass( that.opts.classes );
                    }

                    glbl.$wndw
                        .off( _e.resize )
                        .off( _e.keydown );

                    //  Restore style and position
                    glbl.$page.attr( 'style', glbl.$page.data( _d.style ) );

                    if ( glbl.$scrollTopNode )
                    {
                        glbl.$scrollTopNode.scrollTop( glbl.$page.data( _d.scrollTop ) );
                    }

                    //  Closed
                    that.$menu.trigger( _e.closed );

                }, this.conf.transitionDuration
            );

            //  Closing
            glbl.$html.removeClass( _c.opening );
            this.$menu.trigger( _e.closing );

            return 'close';
        },

        _init: function()
        {
            this.opts = extendOptions( this.opts, this.conf, this.$menu );
            this.direction = ( this.opts.slidingSubmenus ) ? 'horizontal' : 'vertical';

            //  INIT PAGE & MENU
            this._initPage( glbl.$page );
            this._initMenu();
            this._initBlocker();
            this._initPanles();
            this._initLinks();
            this._initOpenClose();
            this._bindCustomEvents();

            if ( $[ _PLUGIN_ ].addons )
            {
                for ( var a = 0; a < $[ _PLUGIN_ ].addons.length; a++ )
                {
                    if ( typeof this[ '_addon_' + $[ _PLUGIN_ ].addons[ a ] ] == 'function' )
                    {
                        this[ '_addon_' + $[ _PLUGIN_ ].addons[ a ] ]();
                    }
                }
            }
        },

        _bindCustomEvents: function()
        {
            var that = this;

            this.$menu
                .off( _e.open + ' ' + _e.close + ' ' + _e.setPage+ ' ' + _e.update )
                .on( _e.open + ' ' + _e.close + ' ' + _e.setPage+ ' ' + _e.update,
                    function( e )
                    {
                        e.stopPropagation();
                    }
                );

            //  Menu-events
            this.$menu
                .on( _e.open,
                    function( e )
                    {
                        if ( $(this).hasClass( _c.current ) )
                        {
                            e.stopImmediatePropagation();
                            return false;
                        }
                        return that.open();
                    }
                )
                .on( _e.close,
                    function( e )
                    {
                        if ( !$(this).hasClass( _c.current ) )
                        {
                            e.stopImmediatePropagation();
                            return false;
                        }
                        return that.close();
                    }
                )
                .on( _e.setPage,
                    function( e, $p )
                    {
                        that._initPage( $p );
                        that._initOpenClose();
                    }
                );

            //  Panel-events
            var $panels = this.$menu.find( this.opts.isMenu && this.direction != 'horizontal' ? 'ul, ol' : '.' + _c.panel );
            $panels
                .off( _e.toggle + ' ' + _e.open + ' ' + _e.close )
                .on( _e.toggle + ' ' + _e.open + ' ' + _e.close,
                    function( e )
                    {
                        e.stopPropagation();
                    }
                );

            if ( this.direction == 'horizontal' )
            {
                $panels
                    .on( _e.open,
                        function( e )
                        {
                            return openSubmenuHorizontal( $(this), that.$menu );
                        }
                    );
            }
            else
            {
                $panels
                    .on( _e.toggle,
                        function( e )
                        {
                            var $t = $(this);
                            return $t.triggerHandler( $t.parent().hasClass( _c.opened ) ? _e.close : _e.open );
                        }
                    )
                    .on( _e.open,
                        function( e )
                        {
                            $(this).parent().addClass( _c.opened );
                            return 'open';
                        }
                    )
                    .on( _e.close,
                        function( e )
                        {
                            $(this).parent().removeClass( _c.opened );
                            return 'close';
                        }
                    );
            }
        },

        _initBlocker: function()
        {
            var that = this;

            if ( !glbl.$blck )
            {
                glbl.$blck = $( '<div id="' + _c.blocker + '" />' )
                    .css( 'opacity', 0 )
                    .appendTo( glbl.$body );
            }

            glbl.$blck
                .off( _e.touchstart )
                .on( _e.touchstart,
                    function( e )
                    {
                        e.preventDefault();
                        e.stopPropagation();
                        glbl.$blck.trigger( _e.mousedown );
                    }
                )
                .on( _e.mousedown,
                    function( e )
                    {
                        e.preventDefault();
                        if ( !glbl.$html.hasClass( _c.modal ) )
                        {
                            that.$menu.trigger( _e.close );
                        }
                    }
                );
        },
        _initPage: function( $p )
        {
            if ( !$p )
            {
                $p = $(this.conf.pageSelector, glbl.$body);
                if ( $p.length > 1 )
                {
                    $[ _PLUGIN_ ].debug( 'Multiple nodes found for the page-node, all nodes are wrapped in one <' + this.conf.pageNodetype + '>.' );
                    $p = $p.wrapAll( '<' + this.conf.pageNodetype + ' />' ).parent();
                }
            }

            $p.addClass( _c.page );
            glbl.$page = $p;
        },
        _initMenu: function()
        {
            var that = this;

            //  Clone if needed
            if ( this.conf.clone )
            {
                this.$menu = this.$menu.clone( true );
                this.$menu.add( this.$menu.find( '*' ) ).filter( '[id]' ).each(
                    function()
                    {
                        $(this).attr( 'id', _c.mm( $(this).attr( 'id' ) ) );
                    }
                );
            }

            //  Strip whitespace
            this.$menu.contents().each(
                function()
                {
                    if ( $(this)[ 0 ].nodeType == 3 )
                    {
                        $(this).remove();
                    }
                }
            );

            //  Prepend to body
            this.$menu
                .prependTo( 'body' )
                .addClass( _c.menu );

            //  Add direction class
            this.$menu.addClass( _c.mm( this.direction ) );

            //  Add options classes
            if ( this.opts.classes )
            {
                this.$menu.addClass( this.opts.classes );
            }
            if ( this.opts.isMenu )
            {
                this.$menu.addClass( _c.ismenu );
            }
            if ( this.opts.position != 'left' )
            {
                this.$menu.addClass( _c.mm( this.opts.position ) );
            }
            if ( this.opts.zposition != 'back' )
            {
                this.$menu.addClass( _c.mm( this.opts.zposition ) );
            }
        },
        _initPanles: function()
        {
            var that = this;


            //  Refactor List class
            this.__refactorClass( $('.' + this.conf.listClass, this.$menu), 'list' );

            //  Add List class
            if ( this.opts.isMenu )
            {
                $('ul, ol', this.$menu)
                    .not( '.mm-nolist' )
                    .addClass( _c.list );
            }

            var $lis = $('.' + _c.list + ' > li', this.$menu);

            //  Refactor Selected class
            this.__refactorClass( $lis.filter( '.' + this.conf.selectedClass ), 'selected' );

            //  Refactor Label class
            this.__refactorClass( $lis.filter( '.' + this.conf.labelClass ), 'label' );

            //  Refactor Spacer class
            this.__refactorClass( $lis.filter( '.' + this.conf.spacerClass ), 'spacer' );

            //  setSelected-event
            $lis
                .off( _e.setSelected )
                .on( _e.setSelected,
                    function( e, selected )
                    {
                        e.stopPropagation();

                        $lis.removeClass( _c.selected );
                        if ( typeof selected != 'boolean' )
                        {
                            selected = true;
                        }
                        if ( selected )
                        {
                            $(this).addClass( _c.selected );
                        }
                    }
                );

            //  Refactor Panel class
            this.__refactorClass( $('.' + this.conf.panelClass, this.$menu), 'panel' );

            //  Add Panel class
            this.$menu
                .children()
                .filter( this.conf.panelNodetype )
                .add( this.$menu.find( '.' + _c.list ).children().children().filter( this.conf.panelNodetype ) )
                .addClass( _c.panel );

            var $panels = $('.' + _c.panel, this.$menu);

            //  Add an ID to all panels
            $panels
                .each(
                    function( i )
                    {
                        var $t = $(this),
                            id = $t.attr( 'id' ) || _c.mm( 'm' + that.serialnr + '-p' + i );

                        $t.attr( 'id', id );
                    }
            );

            //  Add open and close links to menu items
            $panels
                .find( '.' + _c.panel )
                .each(
                    function( i )
                    {
                        var $t = $(this),
                            $u = $t.is( 'ul, ol' ) ? $t : $t.find( 'ul ,ol' ).first(),
                            $l = $t.parent(),
                            $a = $l.find( '> a, > span' ),
                            $p = $l.closest( '.' + _c.panel );

                        $t.data( _d.parent, $l );

                        if ( $l.parent().is( '.' + _c.list ) )
                        {
                            var $btn = $( '<a class="' + _c.subopen + '" href="#' + $t.attr( 'id' ) + '" />' ).insertBefore( $a );
                            if ( !$a.is( 'a' ) )
                            {
                                $btn.addClass( _c.fullsubopen );
                            }
                            if ( that.direction == 'horizontal' )
                            {
                                $u.prepend( '<li class="' + _c.subtitle + '"><a class="' + _c.subclose + '" href="#' + $p.attr( 'id' ) + '">' + $a.text() + '</a></li>' );
                            }
                        }
                    }
                );

            //  Link anchors to panels
            var evt = this.direction == 'horizontal' ? _e.open : _e.toggle;
            $panels
                .each(
                    function( i )
                    {
                        var $opening = $(this),
                            id = $opening.attr( 'id' );

                        $('a[href="#' + id + '"]', that.$menu)
                            .off( _e.click )
                            .on( _e.click,
                                function( e )
                                {
                                    e.preventDefault();
                                    $opening.trigger( evt );
                                }
                            );
                    }
            );

            if ( this.direction == 'horizontal' )
            {
                //  Add opened-classes
                var $selected = $('.' + _c.list + ' > li.' + _c.selected, this.$menu);
                $selected
                    .add( $selected.parents( 'li' ) )
                    .parents( 'li' ).removeClass( _c.selected )
                    .end().each(
                        function()
                        {
                            var $t = $(this),
                                $u = $t.find( '> .' + _c.panel );

                            if ( $u.length )
                            {
                                $t.parents( '.' + _c.panel ).addClass( _c.subopened );
                                $u.addClass( _c.opened );
                            }
                        }
                    )
                    .closest( '.' + _c.panel ).addClass( _c.opened )
                    .parents( '.' + _c.panel ).addClass( _c.subopened );
            }
            else
            {
                //  Replace Selected-class with opened-class in parents from .Selected
                $('li.' + _c.selected, this.$menu)
                    .addClass( _c.opened )
                    .parents( '.' + _c.selected ).removeClass( _c.selected );
            }

            //  Set current opened
            var $current = $panels.filter( '.' + _c.opened );
            if ( !$current.length )
            {
                $current = $panels.first();
            }
            $current
                .addClass( _c.opened )
                .last()
                .addClass( _c.current );

            //  Rearrange markup
            if ( this.direction == 'horizontal' )
            {
                $panels.find( '.' + _c.panel ).appendTo( this.$menu );
            }
        },
        _initLinks: function()
        {
            var that = this;

            $('.' + _c.list + ' > li > a', this.$menu)
                .not( '.' + _c.subopen )
                .not( '.' + _c.subclose )
                .not( '[rel="external"]' )
                .not( '[target="_blank"]' )
                .off( _e.click )
                .on( _e.click,
                    function( e )
                    {
                        var $t = $(this),
                            href = $t.attr( 'href' );

                        //  Set selected item
                        if ( that.__valueOrFn( that.opts.onClick.setSelected, $t ) )
                        {
                            $t.parent().trigger( _e.setSelected );
                        }

                        //  Prevent default / don't follow link. Default: false
                        var preventDefault = that.__valueOrFn( that.opts.onClick.preventDefault, $t, href.slice( 0, 1 ) == '#' );
                        if ( preventDefault )
                        {
                            e.preventDefault();
                        }

                        //  Block UI. Default: false if preventDefault, true otherwise
                        if ( that.__valueOrFn( that.opts.onClick.blockUI, $t, !preventDefault ) )
                        {
                            glbl.$html.addClass( _c.blocking );
                        }

                        //  Close menu. Default: true if preventDefault, false otherwise
                        if ( that.__valueOrFn( that.opts.onClick.close, $t, preventDefault ) )
                        {
                            that.$menu.triggerHandler( _e.close );
                        }
                    }
                );
        },
        _initOpenClose: function()
        {
            var that = this;

            //  Open menu
            var id = this.$menu.attr( 'id' );
            if ( id && id.length )
            {
                if ( this.conf.clone )
                {
                    id = _c.umm( id );
                }

                $('a[href="#' + id + '"]')
                    .off( _e.click )
                    .on( _e.click,
                        function( e )
                        {
                            e.preventDefault();
                            that.$menu.trigger( _e.open );
                        }
                    );
            }

            //  Close menu
            var id = glbl.$page.attr( 'id' );
            if ( id && id.length )
            {
                $('a[href="#' + id + '"]')
                    .off( _e.click )
                    .on( _e.click,
                        function( e )
                        {
                            e.preventDefault();
                            that.$menu.trigger( _e.close );
                        }
                    );
            }
        },

        __valueOrFn: function( o, $e, d )
        {
            if ( typeof o == 'function' )
            {
                return o.call( $e[ 0 ] );
            }
            if ( typeof o == 'undefined' && typeof d != 'undefined' )
            {
                return d;
            }
            return o;
        },

        __refactorClass: function( $e, c )
        {
            $e.removeClass( this.conf[ c + 'Class' ] ).addClass( _c[ c ] );
        }
    };


    $.fn[ _PLUGIN_ ] = function( opts, conf )
    {
        //  First time plugin is fired
        if ( !glbl.$wndw )
        {
            _initPlugin();
        }

        //  Extend options
        opts = extendOptions( opts, conf );
        conf = extendConfiguration( conf );

        return this.each(
            function()
            {
                var $menu = $(this);
                if ( $menu.data( _PLUGIN_ ) )
                {
                    return;
                }
                $menu.data( _PLUGIN_, new $[ _PLUGIN_ ]( $menu, opts, conf ) );
            }
        );
    };

    $[ _PLUGIN_ ].version = _VERSION_;

    $[ _PLUGIN_ ].defaults = {
        position        : 'left',
        zposition       : 'back',
        moveBackground  : true,
        slidingSubmenus : true,
        modal           : false,
        classes         : '',
        onClick         : {
//          close               : true,
//          blockUI             : null,
//          preventDefault      : null,
            setSelected         : true
        }
    };
    $[ _PLUGIN_ ].configuration = {
        preventTabbing      : true,
        panelClass          : 'Panel',
        listClass           : 'List',
        selectedClass       : 'Selected',
        labelClass          : 'Label',
        spacerClass         : 'Spacer',
        pageNodetype        : 'div',
        panelNodetype       : 'ul, ol, div',
        transitionDuration  : 400
    };



    /*
        SUPPORT
    */
    (function() {

        var wd = window.document,
            ua = window.navigator.userAgent,
            ds = document.createElement( 'div' ).style;

        var _touch              = 'ontouchstart' in wd,
            _overflowscrolling  = 'WebkitOverflowScrolling' in wd.documentElement.style,
            _oldAndroidBrowser  = (function() {
                if ( ua.indexOf( 'Android' ) >= 0 )
                {
                    return 2.4 > parseFloat( ua.slice( ua.indexOf( 'Android' ) +8 ) );
                }
                return false;
            })();

        $[ _PLUGIN_ ].support = {

            touch: _touch,
            oldAndroidBrowser: _oldAndroidBrowser,
            overflowscrolling: (function() {
                if ( !_touch )
                {
                    return true;
                }
                if ( _overflowscrolling )
                {
                    return true;
                }
                if ( _oldAndroidBrowser )
                {
                    return false;
                }
                return true;
            })()
        };
    })();


    /*
        BROWSER SPECIFIC FIXES
    */
    $[ _PLUGIN_ ].useOverflowScrollingFallback = function( use )
    {
        if ( glbl.$html )
        {
            if ( typeof use == 'boolean' )
            {
                glbl.$html[ use ? 'addClass' : 'removeClass' ]( _c.nooverflowscrolling );
            }
            return glbl.$html.hasClass( _c.nooverflowscrolling );
        }
        else
        {
            _useOverflowScrollingFallback = use;
            return use;
        }
    };


    /*
        DEBUG
    */
    $[ _PLUGIN_ ].debug = function( msg ) {};
    $[ _PLUGIN_ ].deprecated = function( depr, repl )
    {
        if ( typeof console != 'undefined' && typeof console.warn != 'undefined' )
        {
            console.warn( 'MMENU: ' + depr + ' is deprecated, use ' + repl + ' instead.' );
        }
    };


    //  Global vars
    var _useOverflowScrollingFallback = !$[ _PLUGIN_ ].support.overflowscrolling;


    function extendOptions( o, c, $m )
    {
        if ( typeof o != 'object' )
        {
            o = {};
        }

        if ( $m )
        {
            if ( typeof o.isMenu != 'boolean' )
            {
                var $c = $m.children();
                o.isMenu = ( $c.length == 1 && $c.is( c.panelNodetype ) );
            }
            return o;
        }


        //  Extend onClick
        if ( typeof o.onClick != 'object' )
        {
            o.onClick = {};
        }


        //  DEPRECATED
        if ( typeof o.onClick.setLocationHref != 'undefined' )
        {
            $[ _PLUGIN_ ].deprecated( 'onClick.setLocationHref option', '!onClick.preventDefault' );
            if ( typeof o.onClick.setLocationHref == 'boolean' )
            {
                o.onClick.preventDefault = !o.onClick.setLocationHref;
            }
        }
        //  /DEPRECATED


        //  Extend from defaults
        o = $.extend( true, {}, $[ _PLUGIN_ ].defaults, o );


        //  Degration
        if ( $[ _PLUGIN_ ].useOverflowScrollingFallback() )
        {
            switch( o.position )
            {
                case 'top':
                case 'right':
                case 'bottom':
                    $[ _PLUGIN_ ].debug( 'position: "' + o.position + '" not supported when using the overflowScrolling-fallback.' );
                    o.position = 'left';
                    break;
            }
            switch( o.zposition )
            {
                case 'front':
                case 'next':
                    $[ _PLUGIN_ ].debug( 'z-position: "' + o.zposition + '" not supported when using the overflowScrolling-fallback.' );
                    o.zposition = 'back';
                    break;
            }
        }

        return o;
    }
    function extendConfiguration( c )
    {
        if ( typeof c != 'object' )
        {
            c = {};
        }


        //  DEPRECATED
        if ( typeof c.panelNodeType != 'undefined' )
        {
            $[ _PLUGIN_ ].deprecated( 'panelNodeType configuration option', 'panelNodetype' );
            c.panelNodetype = c.panelNodeType;
        }
        //  /DEPRECATED


        c = $.extend( true, {}, $[ _PLUGIN_ ].configuration, c )

        //  Set pageSelector
        if ( typeof c.pageSelector != 'string' )
        {
            c.pageSelector = '> ' + c.pageNodetype;
        }

        return c;
    }

    function _initPlugin()
    {
        glbl.$wndw = $(window);
        glbl.$html = $('html');
        glbl.$body = $('body');

        glbl.$allMenus = $();


        //  Classnames, Datanames, Eventnames
        $.each( [ _c, _d, _e ],
            function( i, o )
            {
                o.add = function( c )
                {
                    c = c.split( ' ' );
                    for ( var d in c )
                    {
                        o[ c[ d ] ] = o.mm( c[ d ] );
                    }
                };
            }
        );

        //  Classnames
        _c.mm = function( c ) { return 'mm-' + c; };
        _c.add( 'menu ismenu panel list subtitle selected label spacer current highest hidden page blocker modal background opened opening subopened subopen fullsubopen subclose nooverflowscrolling' );
        _c.umm = function( c )
        {
            if ( c.slice( 0, 3 ) == 'mm-' )
            {
                c = c.slice( 3 );
            }
            return c;
        };

        //  Datanames
        _d.mm = function( d ) { return 'mm-' + d; };
        _d.add( 'parent style scrollTop offetLeft' );

        //  Eventnames
        _e.mm = function( e ) { return e + '.mm'; };
        _e.add( 'toggle open opening opened close closing closed update setPage setSelected transitionend webkitTransitionEnd touchstart touchend mousedown mouseup click keydown keyup resize' );


        $[ _PLUGIN_ ]._c = _c;
        $[ _PLUGIN_ ]._d = _d;
        $[ _PLUGIN_ ]._e = _e;

        $[ _PLUGIN_ ].glbl = glbl;

        $[ _PLUGIN_ ].useOverflowScrollingFallback( _useOverflowScrollingFallback );
    }

    function openSubmenuHorizontal( $opening, $m )
    {
        if ( $opening.hasClass( _c.current ) )
        {
            return false;
        } 

        var $panels = $('.' + _c.panel, $m),
            $current = $panels.filter( '.' + _c.current );

        $panels
            .removeClass( _c.highest )
            .removeClass( _c.current )
            .not( $opening )
            .not( $current )
            .addClass( _c.hidden );

        if ( $opening.hasClass( _c.opened ) )
        {
            $current
                .addClass( _c.highest )
                .removeClass( _c.opened )
                .removeClass( _c.subopened );
        }
        else
        {
            $opening
                .addClass( _c.highest );

            $current
                .addClass( _c.subopened );
        }

        $opening
            .removeClass( _c.hidden )
            .removeClass( _c.subopened )
            .addClass( _c.current )
            .addClass( _c.opened );

        return 'open';
    }

    function findScrollTop()
    {
        if ( !glbl.$scrollTopNode )
        {
            if ( glbl.$html.scrollTop() != 0 )
            {
                glbl.$scrollTopNode = glbl.$html;
            }
            else if ( glbl.$body.scrollTop() != 0 )
            {
                glbl.$scrollTopNode = glbl.$body;
            }
        }
        return ( glbl.$scrollTopNode ) ? glbl.$scrollTopNode.scrollTop() : 0;
    }

    function transitionend( $e, fn, duration )
    {
        var _ended = false,
            _fn = function()
            {
                if ( !_ended )
                {
                    fn.call( $e[ 0 ] );
                }
                _ended = true;
            };

        $e.one( _e.transitionend, _fn );
        $e.one( _e.webkitTransitionEnd, _fn );
        setTimeout( _fn, duration * 1.1 );
    }

})( jQuery );

mmenu.css :

Ran out of space...

Answer

Barbara Laird picture Barbara Laird · Jan 28, 2014

Your menu is there, it's just closed by default and you don't have an element to open it. http://jsfiddle.net/uLLW9/ add a open event and you'll see it

$("#navig").mmenu({
    searchfield: true,
    counters: true
});
$("#navig").trigger("open");

Documentation on opening and closing menu: http://mmenu.frebsite.nl/tutorial.php#t_open