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

网络博客 郑永 5322℃ 16评论

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

转载请注明:郑永博客 » WP主题加入jquery toggle推菜单教程

历史上的今天:

(16)个小伙伴在吐槽
Loading...
  1. 超級efly2014-10-11 09:45 Google Chrome 38 Mac OS X 10.9 回复

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

    沙发!
  2. JV2014-10-12 22:47 Firefox 32 Windows XP 回复

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

    板凳!
    • 郑永2014-10-12 23:35 Google Chrome 37 Windows XP 回复

      喜欢自己折腾,不喜欢用插件,呵呵。

    • JV2014-10-18 10:37 Firefox 32 Windows XP 回复

      咳。。。 jquery插件就是一种功能,和wp插件不是一个意思。

    • 郑永2014-10-18 21:01 Google Chrome 38 Windows XP 回复

      哦,明白你意思了 :)嘿嘿

  3. 免费外链2014-10-13 01:06 Firefox 32 Windows 7 回复

    不错,终于给折腾好了呀

    地板!
  4. tiandi2014-10-14 10:51 Google Chrome 34 Windows 8 回复

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

    4楼
  5. zwwooooo2014-10-18 00:17 Firefox 32 Windows 8.1 回复

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

    5楼
    • 郑永2014-10-18 20:48 Google Chrome 38 Windows XP 回复

      哦,边框我故意加上啊,因为怕有的人菜单太多,手机下显示不出来。

    • 郑永2014-10-18 20:52 Google Chrome 38 Windows XP 回复

      汗,这缓存也太牛了,我上次看没边框,手机里有,但是也显示不大明显,于是就留着,现在你这么一说,我在pc上测试一下, 出来一个大边框!我晕,我去把他设置成auto看看,不然就去掉边框。

    • 郑永2014-10-18 20:57 Google Chrome 38 Windows XP 回复

      我已经弄掉了,如果2列排列,应该没有那么多菜单了,呵呵。

    • 郑永2014-10-18 21:00 Google Chrome 38 Windows XP 回复

      记起来了,是在火狐狸浏览器的响应式设计里面测试的,所以没看到边框,就忽略了。

  6. 董建2014-10-26 14:08 Google Chrome 37 Windows 7 回复

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

    6楼
    • 郑永2014-10-26 23:35 Google Chrome 38 Windows XP 回复

      很少发代码,嘿嘿 :)谢谢推荐 :)

  7. 大肥羊2014-11-05 11:06 Firefox 32 Windows 7 回复

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

    7楼
gravatar
发表我的评论
取消评论


Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址