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; 删除掉,就可以看效果了,无需缩小窗口。

分类:网络博客 标签:,,,,,

上一篇:fixed属性的兼容性问题

下一篇:你究竟有几个好网友

已经有17条评论!

Loading...
  1. 前來支持一下~感覺挺不錯的!!

    沙发!
  2. JV

    jQuery插件网有很多这种伸缩导航。

    板凳!
  3. 不错,终于给折腾好了呀

    地板!
  4. 这个效果还真不错,手机上的菜单估计也就只能这么处理。

    4F
  5. 效果不错,不知道手机下是不是就没有边框。

    5F
  6. 如果经常发代码,可以考虑使用代码插件(例如 wp-code-highlight),会让代码阅读效果更着眼 :)

    6F
  7. 之前折腾过几次都没成功,放弃了,改成了现在这样的简单导航。。。

    7F
  8. 这代码有点章鱼的感觉

    8F

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑