mmenu not working even with the sample code

css, jquery, mmenu, mobile

Solution

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

Problem

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

Original source