WP主题加入jquery toggle推菜单教程

上次分享了toggle手机菜单jQuery右推push效果，今天看到google主页也加入了这个神奇的toggle推菜单，不得不跟着潮流走啊！好吧，仔细检查了上次js的冲突，找到了根源，原来是我尝试了两种方法的时候，忘记删除第一次残留的代码，才造成屡试不成，今天自己用上了，根据我上次分享的第一方法，写了个简单的3步通用教程（不用看代码，直接贴上），直接按步骤放上即可！

先看效果：直接打开本站，把窗口放小，就可以看到菜单，点击菜单按钮，导航会往右推出来。下面是截图：
第一步：js代码先来：

(function ($) {
'use strict';
$.fn.menuSlide = function (options) {
var settings = $.extend({
'menu': ('#zymenu'),
'zypush': ('.zypush'),
'zymenulink': ('.zymenu-link'),
'menuWidth': '15em',
'speed': '300'
}, options);
var menuLink = this,
menu = $(settings.menu),
zypush = $(settings.zypush),
width = settings.menuWidth;

var positionOffScreen = {
'position': 'fixed',
'display': 'block',
'top': '0',
'bottom': '0',
'left': '-' + settings.menuWidth,
'width': settings.menuWidth,
'height': '100%'
};

var animateSlide = {
'-webkit-transition': 'left ' + settings.speed + 'ms ease',
'-moz-transition': 'left ' + settings.speed + 'ms ease',
'-ms-transition': 'left ' + settings.speed + 'ms ease',
'-o-transition': 'left ' + settings.speed + 'ms ease',
'transition': 'left ' + settings.speed + 'ms ease'
};

menu.css(positionOffScreen);

menuLink.on('click.menuSlide', function () {

menu.css(animateSlide);
zypush.css(animateSlide);
menu.toggleClass('slide');
zypush.toggleClass('slide');

if (menu.hasClass('slide') === true) {
menu.css('left', '0');

} else {
menu.css('left', '-' + width);
}

if (zypush.hasClass('slide') === true) {
zypush.css('left', width);

} else {
zypush.css('left', '0');
}
return false;
});
};
}(jQuery));

$(document).ready(function () {
$('.zymenu-link').menuSlide();
$('.menu-guanbi').menuSlide();
});
addListener(document, "click",
function(evt) {
var evt = window.event ? window.event: evt,
target = evt.srcElement || evt.target;
if (target.id == "lianxi") {
document.getElementById("lxi").style.display = "block";
return;
} else {
while (target.nodeName.toLowerCase() != "lianxi" && target.nodeName.toLowerCase() != "html") {
target = target.parentNode;
}
if (target.nodeName.toLowerCase() == "html") {
document.getElementById("lxi").style.display = "none";
}

}
})

addListener(document, "click",
function(evt) {
var evt = window.event ? window.event: evt,
target = evt.srcElement || evt.target;
if (target.id == "sousuo") {
document.getElementById("ssuo").style.display = "block";
return;
} else {
while (target.nodeName.toLowerCase() != "sousuo" && target.nodeName.toLowerCase() != "html") {
target = target.parentNode;
}
if (target.nodeName.toLowerCase() == "html") {
document.getElementById("ssuo").style.display = "none";
}

}
})

 
第二步：接着header顶部代码：（加在body开始下面）

<div id="zymenu" class="zypanel">
<ul>
<?php wp_nav_menu(); ?>
<li><a href="index.php">返回主页</a></li>
<li><a class="menu-guanbi">关闭菜单</a></li>
</ul>
</div>

<div id="zypush" class="zypush">

<div class="zymenu-link"><span></span></div>

注意，然后在footer最后body结束前面加一个</div>

第三步：css （不喜欢的话可以再改）

#zymenu{display:none;}

#zymenu ul{
width: auto;
}

#zymenu li {
float: left;
line-height: auto;
list-style: none outside none;
margin: 0;
padding: 0;
width: 50%;
font-size:14px;
}
.zypush {
position: relative;
}
.zymenu-link {
background: url("images/menu.png") repeat scroll 0 0 / 100% auto;
display: none;
height: 36px;
left: 10px;
position: absolute;
z-index: 12;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 100px;
overflow: hidden;
width: 36px;
top: 7px;

padding: 3px;
}

.menu-guanbi{color:#F9F900;cursor: pointer;}

.zypanel {
background: #2C3E50;
z-index: 9999;
position: fixed;
overflow:scroll;
display:none;
}

.zypanel img {
display: block;
margin: 0px auto;
padding: 1em 0px;
}
.zypanel img:hover {
-webkit-transition: all 0.7s linear;
transition: all 0.7s;
transform: rotate(6.28rad);
-webkit-transform: rotate(6.28rad);
}
.zypanel a {
display: block;
border-bottom: 2px solid #34495D;
padding: 1em;
}
.zypanel a:link, .zypanel a:visited {
color: #fff;
}
.zypanel a:hover, .zypanel a:active {
background: #25B89A;
}

OK，最后不要忘了在响应式里面显示菜单层和菜单按钮，还有background: url("images/menu.png") repeat scroll 0 0 / 100% auto; 菜单背景里的图片上传到主题images目录下，教程结束，可以用手机打开看看效果了！

ps：如果你迫不及待想看效果，但主题又不支持响应式，好吧，直接把上面的css里面的有两处display:none; 删除掉，就可以看效果了，无需缩小窗口。

赏