Twenty Twelve主题修改：返回顶部按钮–菜单、边栏隐藏

正如大家所见，我又用回了Twenty Twelve主题，该主题经过我的优化与修改显得个性起来。这一次Twenty Twelve的修改从Ray所出的主题noter中获取了些少灵感：移动端访问本博客自动隐藏菜单栏和边栏。还有就是增加返回顶部按钮。 因为Twenty Twelve主题在移动端菜单栏只会居中显示灰色『菜单』二字，不是很美观。同时边栏在移动端访问如果显示那就觉得有点累赘，同时在移动端访问一般人不会点击反而会影响整体美观。强迫症又犯了，一起把它隐藏起来。所使用的CSS文件显得很初始，详细如 0 Comments

正如大家所见，我又用回了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，嘻嘻。

本文链接：https://my.lmcjl.com/post/15966.html

展开阅读全文

相关文章

4 评论

留下您的评论.