正如大家所见,我又用回了Twenty Twelve主题,该主题经过我的优化与修改显得个性起来。这一次Twenty Twelve的修改从Ray所出的主题noter中获取了些少灵感:移动端访问本博客自动隐藏菜单栏和边栏。还有就是增加返回顶部按钮。
因为Twenty Twelve主题在移动端菜单栏只会居中显示灰色『菜单』二字,不是很美观。同时边栏在移动端访问如果显示那就觉得有点累赘,同时在移动端访问一般人不会点击反而会影响整体美观。强迫症又犯了,一起把它隐藏起来。所使用的CSS文件显得很初始,详细如下:
@media(max-width:720px){
.widget-area .widget{display:none;}
}
@media(max-width:720px){
.menu-toggle{display:none;}
}
以下是返回顶部按钮代码如下:
1、html代码,放在footer.php合适位置既可。
<div class="back2top"><svg class="icon" viewBox="0 0 1229 1024" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.203125" height="16"><defs><style type="text/css"></style></defs><path d="M955.765399 614.591058v408.726594h-682.348237V614.591058h-273.416939l614.591057-614.591058 614.591058 614.591058H955.765399z" fill="" ></path></svg></div>
2、css代码
.back2top{position:fixed;bottom:80px;right:25px;cursor:pointer;background-color:#444;width:40px;height:40px;text-align:center;line-height:40px;border-radius:100%;-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0);-webkit-transition:.5s;transition:.5s}.back2top.is-active{-webkit-transform:translateZ(0);transform:translateZ(0)}.back2top svg{fill:#fff}
3、js代码,放入主题任何调用的js文件尾部既可。
$(window).on("scroll",
function() {
var t = $(this).scrollTop();
t > 200 ? $(".back2top").addClass("is-active") : $(".back2top").removeClass("is-active")
}),
$(document).on("click", ".back2top",
function() {
$("html,body").animate({
scrollTop: 0
},
800)
});
在此再次感谢Ray,因为技术小白的我总是时不时去打扰他,向他请教与支持,主要是请教的问题总是没有一点技术含量的小白问题,相信他面对我的问题也是哭笑不得,嘻嘻。多谢了。
本文纯技术记载,担心自已忘了还要再次去打扰Ray,嘻嘻。
哈哈,经典的主题,永不过时。
会技术真好,你的博客主题又更换了,越来越简洁。
技术贴不错,回去我加上。
你的主题在移动端显示不错,但是评论部份就显得过小了,建议改之。
Twenty Twelve真的是好简洁。
这个还要看是谁使用Twenty Twelve,哈哈,欢迎你的到来。
哈哈~也是……
你好我想问一下,如何在在移动端菜单、边栏隐藏。可否告知
本文的第一段代码就是隐藏代码,请参详。
友情链接那个如何变成你这样啊,我增加友情链接都是单排的。
请详细看本人的CSS文件,里面有详细的备注。
非常感谢。