5

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...

Omar
  • 32,302
  • 9
  • 69
  • 112
idelara
  • 1,786
  • 4
  • 24
  • 48

1 Answers1

2

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

Barbara Laird
  • 12,599
  • 2
  • 44
  • 57
  • Worked! Thank you very much! you really helped me out! – idelara Jan 30 '14 at 08:01
  • Done! Can I ask you another question? I have the plugin working now, but when using jQM and when trying to redirect to another page using div ids and clicking an anchor tag from the mmenu it does not work. Any suggestions? Thank you in advance! – idelara Jan 30 '14 at 23:53
  • What do your href's look like? Can you edit the fiddle to illustrate the problem? – Barbara Laird Jan 31 '14 at 00:21
  • Please see the question: http://stackoverflow.com/questions/21471762/mmenu-not-redirecting-to-jquery-div-tag – idelara Jan 31 '14 at 03:14