ide*_*ara 5 css mobile jquery mmenu
我正在尝试将mmenu集成到我目前正在使用jQuery和jQuery Mobile开发的移动网站上，但是即使文档中说明了最基本的代码，我似乎也无法使其运行。
这是我的整个代码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>
一个有趣的注释是，在src文件夹中查找时，我没有看到仅名为“ mmenu.css”的文件，但找到了jquery.mmenu.css，我以为是其中包含的那个，然后将其重命名为mmenu .css并将其包含在内。
这是我打开index.html时得到的输出
Header Title
Lorem Ipsum
Contact
有人知道我为什么不能运行它吗？是的，我已经阅读了整个文档并尝试了很多不同的方法，但似乎没有任何反应。
提前非常感谢您！
干杯。
编辑：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 ).add
您的菜单就在那里，它只是默认关闭，并且您没有可以打开它的元素。 http://jsfiddle.net/uLLW9/ 添加一个打开事件，你会看到它
$("#navig").mmenu({
searchfield: true,
counters: true
});
$("#navig").trigger("open");
有关打开和关闭菜单的文档： http://mmenu.frebsite.nl/tutorial.php#t_open