wordpress教程-子比主题左侧悬浮自定义导航+打赏按钮美化CSS代码-懒人Blog(资源素材网)

今天看了一个网站觉得侧边栏按钮挺好看的就扒了下来，哈哈哈，主要还是看中了打赏才扒下的。有能力的大佬可以做菜单弹窗或者TAB导航，怎么喜欢怎么搞。我把弹窗去除了，可以直接点按钮跳转页面。

注：CSS代码以子比主题适配的，其他主题自行测试。

先看下效果图：

CSS代码：把下面代码放到主题后台自定义代码中

/*左侧悬浮导航+打赏按钮* 懒人资源网 lanrenn.cn/
.siderfloat{position:fixed;left:0;top:210px;width:35px;}
.siderfloat__click{display:block;height:115px;background:url(https://pic.imgdb.cn/item/64a017a31ddac507cc06d298.png);}
.siderfloat__quick{display:inline-block;width:35px;background:#eee;border-bottom:#c9c9c9 1px solid;text-align:center;}
.siderfloat__txt{display:block;width:20px;margin:0 auto;padding:10px 0;line-height:1.2;font-weight:bold;}

HTML代码：放到主题设置自定义底部HTML代码

/*左侧悬浮导航+打赏按钮* 懒人资源网 lanrenn.cn/
<div class="siderfloat">
	<a href="/" target="_blank" class="siderfloat__click"> </a>
	<a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#CN').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单1</span></a>
	<a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#TW').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单2</span></a>
	<a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#HK').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单3</span></a>
	<a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#JP').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单4</span></a>
	<a href="/" class="siderfloat__quick" onclick="$('html,body').animate({scrollTop: $('#WG').offset().top - '170'}, 600);"><span class="siderfloat__txt">菜单5</span></a>
</div>

🎉 恭喜你发现了宝藏！>>点此前往<<

👋 感谢您的观看，对您有用就分享出去吧！

如您有好的资源/素材，可参与创作者激励计划享投稿分成。分成介绍
投稿成功收录，即可获得 1-10元/篇奖励。（重复内容无奖励）

本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！

1 如果您喜欢本站,点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：下载帮助 | 报毒说明 | 进站必看 | 广告合作；
3 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责；
4 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负；
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理；
6 如若转载，请注明文章出处：

THE END