以下是 侧边多级jquery菜单插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>侧边多级jquery菜单插件</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<link rel="stylesheet" href="../jquery.multilevelpushmenu.css">
<link rel="stylesheet" href="basichtml.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://13141618.taobao.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="pushobj">
Some content here!
</div>
<div id="menu">
<nav>
<h2><i class="fa fa-reorder"></i>All Categories</h2>
<ul>
<li>
<a href="#"><i class="fa fa-laptop"></i>Devices</a>
<h2><i class="fa fa-laptop"></i>Devices</h2>
<ul>
<li>
<a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
<h2><i class="fa fa-phone"></i>Mobile Phones</h2>
<ul>
<li>
<a href="#">Super Smart Phone</a>
</li>
<li>
<a href="#">Thin Magic Mobile</a>
</li>
<li>
<a href="#">Performance Crusher</a>
</li>
<li>
<a href="#">Futuristic Experience</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-desktop"></i>Televisions</a>
<h2><i class="fa fa-desktop"></i>Televisions</h2>
<ul>
<li>
<a href="#">Flat Super Screen</a>
</li>
<li>
<a href="#">Gigantic LED</a>
</li>
<li>
<a href="#">Power Eater</a>
</li>
<li>
<a href="#">3D Experience</a>
</li>
<li>
<a href="#">Classic Comfort</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
<h2><i class="fa fa-camera-retro"></i>Cameras</h2>
<ul>
<li>
<a href="#">Smart Shot</a>
</li>
<li>
<a href="#">Power Shooter</a>
</li>
<li>
<a href="#">Easy Photo Maker</a>
</li>
<li>
<a href="#">Super Pixel</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-book"></i>Magazines</a>
<h2><i class="fa fa-book"></i>Magazines</h2>
<ul>
<li>
<a href="#">National Geographics</a>
</li>
<li>
<a href="#">The Spectator</a>
</li>
<li>
<a href="#">Rambler</a>
</li>
<li>
<a href="#">Physics World</a>
</li>
<li>
<a href="#">The New Scientist</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
<h2><i class="fa fa-shopping-cart"></i>Store</h2>
<ul>
<li>
<a href="#"><i class="fa fa-tags"></i>Clothes</a>
<h2><i class="fa fa-tags"></i>Clothes</h2>
<ul>
<li>
<a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
<h2><i class="fa fa-female"></i>Women's Clothing</h2>
<ul>
<li>
<a href="#">Tops</a>
</li>
<li>
<a href="#">Dresses</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
<h2><i class="fa fa-male"></i>Men's Clothing</h2>
<ul>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Trousers</a>
</li>
<li>
<a href="#">Shoes</a>
</li>
<li>
<a href="#">Sale</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Jewelry</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Grocery</a>
</li>
</ul>
</li>
<li>
<a href="#">Collections</a>
</li>
<li>
<a href="#">Credits</a>
</li>
</ul>
</nav>
</div>
<script src="../jquery-3.4.1.min.js"></script>
<script src="../jquery.multilevelpushmenu.min.js"></script>
<script type="text/javascript" src="basichtml.js"></script>
</body>
</html>
JS代码(basichtml.js):
$(document).ready(function(){
// HTML markup implementation,overlap mode$( '#menu' ).multilevelpushmenu({
containersToPush:[$( '#pushobj' )]}
);
}
);
JS代码(jquery.multilevelpushmenu.min.js):
(function(a){
a.fn.multilevelpushmenu=function(c){
var b=arguments;
returnValue=null;
this.each(function(){
var I=this,l=a(this),i=(l.context!=undefined)?l:a("body"),P=(c.menu!=undefined)?c.menu:l.find("nav"),r=k()?"touchstart":"click";
var N=a.extend({
container:i,containersToPush:null,menuID:((i.prop("id")!=undefined&&i.prop("id")!="")?i.prop("id"):this.nodeName.toLowerCase())+"_multilevelpushmenu",wrapperClass:"multilevelpushmenu_wrapper",menuInactiveClass:"multilevelpushmenu_inactive",menu:P,menuWidth:0,menuHeight:0,collapsed:false,backText:"Back",backItemClass:"backItemClass",backItemIcon:"fa fa-angle-right",groupIcon:"fa fa-angle-left",mode:"overlap",overlapWidth:40,preventItemClick:true,preventGroupItemClick:true,onCollapseMenuStart:function(){
}
,onCollapseMenuEnd:function(){
}
,onExpandMenuStart:function(){
}
,onExpandMenuEnd:function(){
}
,onGroupItemClick:function(){
}
,onItemClick:function(){
}
,onTitleItemClick:function(){
}
,onBackItemClick:function(){
}
}
,c);
if(!a.data(I,"plugin_multilevelpushmenu")){
a.data(I,"plugin_multilevelpushmenu",N);
I.settings=a.data(I,"plugin_multilevelpushmenu")}
var C={
init:function(){
return g.apply(this,Array.prototype.slice.call(arguments))}
,collapse:function(){
return A.apply(this,Array.prototype.slice.call(arguments))}
,expand:function(){
return o.apply(this,Array.prototype.slice.call(arguments))}
,menuexpanded:function(){
return f.apply(this,Array.prototype.slice.call(arguments))}
,activemenu:function(){
return F.apply(this,Array.prototype.slice.call(arguments))}
,findmenusbytitle:function(){
return J.apply(this,Array.prototype.slice.call(arguments))}
,finditemsbyname:function(){
return K.apply(this,Array.prototype.slice.call(arguments))}
,pathtoroot:function(){
return m.apply(this,Array.prototype.slice.call(arguments))}
,comparepaths:function(){
return x.apply(this,Array.prototype.slice.call(arguments))}
,option:function(){
return e.apply(this,Array.prototype.slice.call(arguments))}
,additems:function(){
return B.apply(this,Array.prototype.slice.call(arguments))}
,removeitems:function(){
return u.apply(this,Array.prototype.slice.call(arguments))}
}
;
function q(R){
if(R.stopPropagation&&R.preventDefault){
R.stopPropagation();
R.preventDefault()}
else{
R.cancelBubble=true;
R.returnValue=false}
}
function Q(){
var R=a("<nav />").prop({
id:I.settings.menuID,className:I.settings.wrapperClass}
).appendTo(I.settings.container);
d(I.settings.menu,R)}
function d(S,R){
if(S.level==undefined){
S.level=0}
a.each(S,function(){
var X=a("<div />").attr({
"class":"levelHolderClass","data-level":S.level,style:"margin-left:"+((S.level==0&&!I.settings.collapsed)?0:"-200%")}
).appendTo(R),T=(w(I.settings.menuWidth)||(M(I.settings.menuWidth)&&I.settings.menuWidth>0));
if(T){
X.width(I.settings.menuWidth)}
var V=a("<h2 />").text(this.title).appendTo(X),U=a("<i />").prop({
"class":"floatRight cursorPointer "+this.icon}
).prependTo(V);
U.bind(r,function(Y){
h(Y,X,S)}
);
if(S.level>0){
D(X)}
var W=a("<ul />").appendTo(X);
a.each(this.items,function(){
O(this,X,-1)}
)}
)}
function p(){
var R=(I.settings.container.find("nav").length>0)?I.settings.container.find("nav"):I.settings.menu;
if(R.length==0){
return false}
R.prop({
id:I.settings.menuID,className:I.settings.wrapperClass}
);
n(R)}
function n(R){
if(R.level==undefined){
R.level=0}
a.each(R,function(){
var W=a("<div />").attr({
"class":"levelHolderClass","data-level":R.level,style:"margin-left:"+((R.level==0&&!I.settings.collapsed)?0:"-200%")}
).appendTo(R),S=(w(I.settings.menuWidth)||(M(I.settings.menuWidth)&&I.settings.menuWidth>0));
if(S){
W.width(I.settings.menuWidth)}
var U=R.children("h2");
U.appendTo(W);
var T=U.children("i");
T.addClass("floatRight cursorPointer");
T.bind(r,function(X){
h(X,W,R)}
);
if(R.level>0){
D(W)}
var V=R.children("ul");
V.appendTo(W);
a.each(V.children("li"),function(){
var Y=a(this);
var X=Y.children("a");
var Z=X.children("i");
Z.addClass("floatRight");
if(Y.children("ul").length>0){
X.bind(r,function(aa){
H(aa,W,Y)}
);
j(X);
Y.level=R.level+1;
n(Y)}
else{
X.bind(r,function(aa){
t(aa,W,Y)}
)}
}
)}
)}
function h(U,T,S){
if(a(I).find("div.levelHolderClass").is(":animated")){
return false}
I.settings.onTitleItemClick.apply(this,Array.prototype.slice.call([U,T,I.settings]));
q(U);
if(S.level==0&&parseInt(T.css("margin-left"))<0){
o()}
else{
var V=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((a(this).attr("data-level")>T.attr("data-level"))&&(parseInt(a(this).css("margin-left"))>=0))}
),R=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((a(this).attr("data-level")<=T.attr("data-level"))&&(parseInt(a(this).css("margin-left"))>=0))}
),W=(V.length==0&&R.length==1)?A():A(parseInt(T.attr("data-level")))}
T.css("visibility","visible");
T.find("."+I.settings.backItemClass).css("visibility","visible");
T.find("ul").css("visibility","visible");
T.removeClass(I.settings.menuInactiveClass)}
function D(U){
var R=a("<div />").attr({
"class":I.settings.backItemClass}
).appendTo(U),S=a("<a />").prop({
href:"#"}
).text(I.settings.backText).appendTo(R),T=a("<i />").prop({
"class":"floatRight "+I.settings.backItemIcon}
).prependTo(S);
S.bind(r,function(V){
G(V,U)}
)}
function G(S,R){
if(a(I).find("div.levelHolderClass").is(":animated")){
return false}
I.settings.onBackItemClick.apply(this,Array.prototype.slice.call([S,R,I.settings]));
q(S);
A(parseInt(R.attr("data-level")-1))}
function H(T,S,R){
if(a(I).find("div.levelHolderClass").is(":animated")){
return false}
I.settings.onGroupItemClick.apply(this,Array.prototype.slice.call([T,S,R,I.settings]));
o(R.find("div:first"));
if(I.settings.preventGroupItemClick){
q(T)}
}
function j(R){
var S=a("<i />").prop({
"class":"iconSpacing "+I.settings.groupIcon}
).prependTo(R)}
function O(){
var U=arguments[0],X=arguments[1],R=arguments[2],W=X.find("ul:first"),T=a("<li />");
(R<(W.find("li").length)&&R>=0)?T.insertBefore(W.find("li").eq(R)):T.appendTo(W);
var S=a("<a />").prop({
href:U.link}
).text(U.name).appendTo(T),V=a("<i />").prop({
"class":"floatRight "+U.icon}
).prependTo(S);
if(U.items){
S.bind(r,function(Y){
H(Y,X,T)}
);
j(S);
U.items.level=parseInt(X.attr("data-level"),10)+1;
d(U.items,T)}
else{
S.bind(r,function(Y){
t(Y,X,T)}
)}
}
function t(T,S,R){
I.settings.onItemClick.apply(this,Array.prototype.slice.call([T,S,R,I.settings]));
if(I.settings.preventItemClick){
q(T)}
}
function L(){
var T=arguments[0],V=arguments[1],R=arguments[2],U=(a("#"+I.settings.menuID+" div.levelHolderClass").first().css("filter").match(/DXImageTransform\.Microsoft\.Shadow/))?a("#"+I.settings.menuID+" div.levelHolderClass").first().get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength:0,aa=(T==undefined)?Math.max.apply(null,a("#"+I.settings.menuID+" div.levelHolderClass").map(function(){
return a(this).width()}
).get()):T,Z=Math.max.apply(null,a("#"+I.settings.menuID+" div.levelHolderClass").map(function(){
return a(this).attr("data-level")}
).get()),Y=aa+Z*(I.settings.overlapWidth+U),ab=(V==undefined)?Math.max.apply(null,a("#"+I.settings.menuID+" div.levelHolderClass").map(function(){
return a(this).height()}
).get()):V,X=(w(I.settings.menuWidth)||(M(I.settings.menuWidth)&&I.settings.menuWidth>0)),S=(w(I.settings.menuHeight)||(M(I.settings.menuHeight)&&I.settings.menuHeight>0)),W=(R==undefined)?a("#"+I.settings.menuID+" div.levelHolderClass"):R;
(X)?W.width(I.settings.menuWidth):W.width(aa);
(S)?a("#"+I.settings.menuID).height(I.settings.menuHeight):a("#"+I.settings.menuID).height(ab);
i.width(Y);
i.height(ab);
z();
I.settings.menuWidth=aa;
I.settings.menuHeight=ab}
function z(){
var S=a("#"+I.settings.menuID+" div.levelHolderClass:first"),R=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((a(this).position().left<0||parseInt(a(this).css("margin-left"))<0)&&a(this).attr("data-level")>S.attr("data-level"))}
);
R.each(function(){
a(this).css("margin-left",((a(this).attr("data-level")==0&&!I.settings.collapsed)?0:(-2)*a(this).width()))}
)}
function M(R){
return typeof R==="number"&&parseFloat(R)==parseInt(R,10)&&!isNaN(R)}
function w(R){
return typeof R==="string"&&(R.indexOf("%")!=-1||R.indexOf("px")!=-1||R.indexOf("em")!=-1)}
function g(){
var R=(c.menu!=undefined)?Q():p();
L();
v(I.settings.collapsed);
return l}
function v(R){
if(R){
$baseLevelHolder=a("#"+I.settings.menuID+" div.levelHolderClass:first");
$baseLevelHolder.find("ul").hide();
$baseLevelHolder.addClass(I.settings.menuInactiveClass);
$baseLevelHolder.stop().animate({
marginLeft:((-1)*$baseLevelHolder.width()+I.settings.overlapWidth)}
)}
}
function y(R){
if(I.settings.containersToPush==null){
return false}
a.each(I.settings.containersToPush,function(){
a(this).stop().animate({
marginLeft:a(this).offset().left-a(this).position().left+R}
)}
)}
function A(){
if(a(I).find("div.levelHolderClass").is(":animated")){
return false}
I.settings.onCollapseMenuStart.apply(this,Array.prototype.slice.call([I.settings]));
var S=arguments[0],aa=arguments[1],W={
}
,T,U,V,ab=a("#"+I.settings.menuID+" div.levelHolderClass:first"),Z=(S==undefined)?true:false;
W.collapsingEnded=false;
if(typeof S=="object"){
S=S.attr("data-level")}
else{
if(typeof S=="string"){
var R=J(S);
if(R&&R.length==1){
S=R.attr("data-level")}
else{
S=ab.attr("data-level")}
}
else{
if(S==undefined||!M(S)||S<0){
S=ab.attr("data-level")}
}
}
if(aa==undefined&&typeof aa!="object"){
aa=[{
method:I.settings.onCollapseMenuEnd,args:[I.settings]}
]}
else{
a.merge(aa,[{
method:I.settings.onCollapseMenuEnd,args:[I.settings]}
])}
var Y=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((a(this).attr("data-level")>S)&&(parseInt(a(this).css("margin-left"))>=0&&a(this).position().left>=0))}
),X=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((a(this).attr("data-level")<=S)&&(parseInt(a(this).css("margin-left"))>=0&&a(this).position().left>=0))}
);
if(X.length>0){
W.prevAnimEnded=false;
Y.each(function(ac,ad){
T=(a(ad).css("filter").match(/DXImageTransform\.Microsoft\.Shadow/))?a(ad).get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength:0;
U=(I.settings.mode=="overlap")?a(ad).width()-(Y.length+X.length-a(ad).attr("data-level")-1)*(I.settings.overlapWidth+T)-T:a(ad).width()-T;
a(ad).stop().animate({
marginLeft:((-1)*U),width:U}
)}
);
W.nextAnimEnded=(Y.length>0)?false:true;
Y.last().queue(function(){
W.nextAnimEnded=true;
E(W,aa)}
);
X.each(function(ad,ae){
T=(a(ae).css("filter").match(/DXImageTransform\.Microsoft\.Shadow/))?a(ae).get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength:0;
var ac=X.filter(function(){
return a(this).attr("data-level")==S}
);
ac.css("visibility","visible");
ac.find("."+I.settings.backItemClass).css("visibility","visible");
ac.find("ul").css("visibility","visible");
ac.removeClass(I.settings.menuInactiveClass);
U=(I.settings.mode=="overlap")?a(ae).width()-Y.length*(I.settings.overlapWidth+T)-T:a(ae).width()-T;
a(ae).stop().animate({
width:U,marginLeft:(a(ae).attr("data-level")==ab.attr("data-level")&&Z)?((-1)*a(ae).width()+(Y.length+1)*I.settings.overlapWidth):0}
,function(){
if(a(ae).attr("data-level")==ab.attr("data-level")&&Z){
ab.find("ul").hide(500,function(){
ab.addClass(I.settings.menuInactiveClass)}
)}
}
);
V=(I.settings.mode=="overlap")?((-1)*(Y.length*(I.settings.overlapWidth+T))):0;
if(a(ae).attr("data-level")==ab.attr("data-level")&&Z){
y((-1)*(ab.width()-T)+I.settings.overlapWidth)}
else{
y(V)}
}
);
X.last().queue(function(){
W.prevAnimEnded=true;
E(W,aa)}
)}
W.collapsingEnded=true;
E(W,aa);
return l}
function s(){
if(a(I).find("div.levelHolderClass").is(":animated")){
return false}
I.settings.onExpandMenuStart.apply(this,Array.prototype.slice.call([I.settings]));
var T=arguments[0],ab=arguments[1],S,U,W,V={
}
,ac=a("#"+I.settings.menuID+" div.levelHolderClass:first"),ae=parseInt(ac.css("margin-left"),10)<0||ac.position().left<0,Y=(T==undefined)?true:false;
V.expandingEnded=false;
if(ab==undefined&&typeof ab!="object"){
ab=[{
method:I.settings.onExpandMenuEnd,args:[I.settings]}
]}
else{
a.merge(ab,[{
method:I.settings.onExpandMenuEnd,args:[I.settings]}
])}
if(Y){
V.baseAnimEnded=false;
ac.removeClass(I.settings.menuInactiveClass);
ac.stop().animate({
marginLeft:0}
,function(){
ac.find("ul").show(500).last().queue(function(){
V.baseAnimEnded=true;
E(V,ab)}
)}
);
var ad=(!f(ac))?y(ac.width()-I.settings.overlapWidth):null}
else{
if(typeof T=="object"){
$selectedLevelHolder=T}
else{
if(typeof T=="string"){
$selectedLevelHolder=J(T)}
else{
$selectedLevelHolder=null;
a.error("Provided menu selector is not valid")}
}
if($selectedLevelHolder&&$selectedLevelHolder.length==1){
var R=F(),aa=(R.length==1)?R.attr("data-level"):0,X=$selectedLevelHolder.width();
V.setToOpenAnimEnded=false;
if(setToOpenHolders=m($selectedLevelHolder)){
var Z=a(setToOpenHolders).length-1;
ac.find("ul").show(0);
a(setToOpenHolders).find("ul").css("visibility","hidden");
a(setToOpenHolders).find("div").css("visibility","visible");
a(setToOpenHolders).find("."+I.settings.backItemClass).css("visibility","hidden");
a(setToOpenHolders).each(function(af,ag){
S=(a(ag).css("filter").match(/DXImageTransform\.Microsoft\.Shadow/))?a(ag).get(0).filters.item("DXImageTransform.Microsoft.Shadow").strength:0;
U=X-S+(Z-a(ag).attr("data-level"))*(I.settings.overlapWidth+S);
a(ag).stop().animate({
marginLeft:0,width:(I.settings.mode=="overlap")?U:X-S}
,function(){
a(ag).addClass(I.settings.menuInactiveClass)}
)}
);
a(setToOpenHolders).last().queue(function(){
a(this).removeClass(I.settings.menuInactiveClass);
V.setToOpenAnimEnded=true;
E(V,ab)}
);
if(ae){
y(ac.width()-I.settings.overlapWidth)}
if(I.settings.mode=="overlap"){
W=((ae)?(X+(Z-1)*(I.settings.overlapWidth+S)):((Z-aa)*(I.settings.overlapWidth+S)));
y(W)}
$selectedLevelHolder.css("visibility","visible");
$selectedLevelHolder.find("."+I.settings.backItemClass).css("visibility","visible");
$selectedLevelHolder.find("ul").css("visibility","visible");
$selectedLevelHolder.removeClass(I.settings.menuInactiveClass)}
else{
a.error("Invalid menu object provided")}
}
else{
a.error("No or too many menus named "+T)}
}
V.expandingEnded=true;
E(V,ab)}
function o(){
var W=arguments[0],T,S=F(),V,R,U;
if(typeof W=="object"){
T=W}
else{
if(typeof W=="string"){
U=J(W);
if(U){
T=U.eq(0)}
else{
a.error(W+" menu level does not exist!")}
}
else{
T=a("#"+I.settings.menuID+" div.levelHolderClass:first")}
}
V=x(T,S,true);
R=(V.length>0)?Math.max.apply(null,V.map(function(){
return a(this).attr("data-level")}
).get()):0;
if(R<S.attr("data-level")){
A(R,[{
method:s,args:arguments}
])}
else{
s.apply(this,Array.prototype.slice.call(arguments))}
return l}
function J(){
var R=arguments[0],S,T=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((a(this).children("h2").text()==R))}
);
if(T.length>0){
returnValue=T;
S=returnValue}
else{
returnValue=false;
S=returnValue}
return S}
function K(){
var T=arguments[0],R,S=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass li").filter(function(){
return((a(this).children("a").text()==T))}
);
if(S.length>0){
returnValue=S;
R=returnValue}
else{
returnValue=false;
R=returnValue}
return R}
function m(){
var T=arguments[0],U,S,R;
if(T==undefined||T.length!=1){
returnValue=false;
return returnValue}
U=T.parents("div.levelHolderClass");
S=a.merge(U.get().reverse(),T.get());
returnValue=S;
return returnValue}
function x(){
var aa=arguments[0],Y=arguments[1],X=(arguments[2]!=undefined)?arguments[2]:false,W,T,V,U,ab,S,Z,R;
if(aa==undefined||Y==undefined){
returnValue=false;
return returnValue}
W=(aa.length==1)?aa.parents("div.levelHolderClass"):null;
T=(Y.length==1)?Y.parents("div.levelHolderClass"):null;
V=(W!=null)?a.merge(W.get().reverse(),aa.get()):[];
U=(T!=null)?a.merge(T.get().reverse(),Y.get()):[];
ab=(V.length>=U.length)?V:U;
S=(ab===V)?U:V;
Z=a(ab).filter(function(){
return(X)?(a.inArray(this,S)!=-1):(a.inArray(this,S)==-1)}
);
returnValue=Z;
return returnValue}
function F(){
var S=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return((parseInt(a(this).css("margin-left"))>=0&&a(this).position().left>=0))}
),R=Math.max.apply(null,S.map(function(){
return a(this).attr("data-level")}
).get());
$activeLevelHolder=S.filter(function(){
return a(this).attr("data-level")==R}
);
returnValue=$activeLevelHolder;
return returnValue}
function f(){
var S=arguments[0],R=false;
if(S==undefined){
return R}
if(parseInt(S.css("margin-left"))>=0&&S.position().left>=0){
R=true}
return R}
function B(){
var S=arguments[0],U=arguments[1],R=arguments[2];
if(U==undefined||typeof S!="object"){
return false}
if(S.level==undefined){
S.level=parseInt(U.attr("data-level"),10)}
if(R==undefined){
R=0}
var T=U.find("ul:first");
a.each(S,function(){
if(this.name!=undefined){
O(this,U,R)}
}
);
L(I.settings.menuWidth,undefined,U.find("div.levelHolderClass"));
return l}
function u(){
var U=arguments[0];
if(U==undefined||typeof U!="object"||U.length==0){
return false}
U.remove();
var R=F();
if(R.length==1){
R.css("visibility","visible");
R.find("."+I.settings.backItemClass).css("visibility","visible");
R.find("ul").css("visibility","visible");
R.removeClass(I.settings.menuInactiveClass);
var S=R.width()-I.settings.menuWidth;
if(S!=0){
var T=I.settings.container.find("#"+I.settings.menuID+" div.levelHolderClass").filter(function(){
return(a(this).position().left>=0&&parseInt(a(this).css("margin-left"))>=0)}
);
T.each(function(){
a(this).width(a(this).width()-S)}
)}
}
return l}
function E(R,T){
var S=true;
a.each(R,function(U,V){
S=S&&V}
);
if(S){
window.setTimeout(function(){
a.each(T,function(U,V){
V.method.apply(this,Array.prototype.slice.call(V.args))}
)}
,1)}
}
function e(){
var R=false;
if(I.settings[arguments[0]]!=undefined){
if(arguments[1]!=undefined){
I.settings[arguments[0]]=arguments[1]}
R=I.settings[arguments[0]]}
else{
a.error("No option "+arguments[0]+" found in jQuery.multilevelpushmenu")}
return R}
function k(){
var R=false;
(function(S){
if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(S)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(S.substr(0,4))){
R=true}
}
)(navigator.userAgent||navigator.vendor||window.opera);
return R}
if(C[c]){
returnValue=C[c].apply(this,Array.prototype.slice.call(b,1));
return returnValue}
else{
if(typeof c==="object"||!c){
returnValue=C.init.apply(this,arguments);
return returnValue}
else{
a.error("No "+c+" method found in jQuery.multilevelpushmenu")}
}
if(!returnValue){
returnValue=this}
}
);
return returnValue}
}
(jQuery));
CSS代码(basichtml.css):
body{margin:0;padding:0;background:#243342;}
#pushobj{position:absolute;top:0px;left:300px;color:#fff;background:#243342;font-family:'Open Sans Condensed',sans-serif;font-size:2em;z-index:1;}
CSS代码(jquery.multilevelpushmenu_red.css):
.mlpm_w{position:absolute;overflow:hidden;min-width:100%;min-height:100%;margin:0;padding:0;}
.mlpm_w .levelHolderClass{position:absolute;margin-left:-100%;overflow:hidden;left:0;top:0;background:#ce3130;width:auto;min-height:100%;font-family:'Open Sans Condensed',sans-serif;font-size:1em;-moz-box-shadow:5px 0 5px -5px #870000;-webkit-box-shadow:5px 0 5px -5px #870000;box-shadow:5px 0 5px -5px #870000;filter:progid:DXImageTransform.Microsoft.Shadow(color=#870000,direction=90,strength=2);zoom:1;}
.mlpm_w .mlpm_inactive{background:#ba0011;}
.mlpm_w h2{font-size:1.5em;font-weight:bold;color:#870000;padding:0 10px 0 20px;}
.mlpm_w ul{list-style:none;padding:0;margin:0;}
.mlpm_w li{cursor:pointer;border-top:1px solid #870000;padding:10px 10px 10px 20px;}
.mlpm_w li:last-child{border-bottom:1px solid #870000;}
.mlpm_w li:hover{background-color:#870000;}
.mlpm_w a{display:block;outline:none;overflow:hidden;font-size:1.5em;text-decoration:none;color:#fff;}
.mlpm_w a:hover{color:#ffe;}
.mlpm_w .backItemClass{display:block;padding:10px 10px 10px 20px;background:#ba0011;border-top:1px solid #870000;}
.mlpm_w .floatRight{float:right;}
.mlpm_w .cursorPointer{cursor:pointer;}
.mlpm_w .iconSpacing{padding:0 10px 0 0;}
分享到QQ
分享到微博
微信扫一扫
