有朋自远方来,不亦乐乎。
给wordpress写一个移动端底部菜单栏功能
原创 橘子书  发布于 10个月前 ( 05-01 ) 阅读: 1,790 次 评论: 9 条 A+

随着微信的崛起,连带着微信公众号也成为了一时火热。

我依稀还记得当初给客户做微信商城的时候,商家的第一个要求几乎都会提到——底部自定义菜单功能。

如今嘛,虽说这个功能已经逐渐没落了,但它也乘着站在风口之际,迅速成为了移动端的一个标配。比如有赞商城。

 

前阶段,我一直想着啥时给公司网站重新写个移动端界面,今天终于有空处理了。然后忽然想到这个底部菜单栏功能,便顺手写上这个功能。

总体马马虎虎,就一段简单的html代码跟css样式。

只是到了临近下班,才突然想起来:前段时间知更鸟的begin主题好像新添了这个功能,而且更完善(默认不显示菜单栏,下拉到一定位置以后才显示)。

所以我晚上得空后审查一下元素,发现挺简单的,就索性移植到leo主题。

以下是食用方法,请慢用:

1

.php文件合适的位置插入如下html代码

<?php if ( wp_is_mobile() ){ ?>
<nav class="footer-nav" style="display: block;">
	<ul class="footer-menu">
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
</ul></nav>
<?php } ?>

这次我就懒得为这个功能写主题后台控制选项(开启与关闭,自定义nav内容)的函数,毕竟就几个代码而已, 所以没啥必要。

Ps:注意修改代码(用正确的内容替换#跟阿拉伯数字)

2

打开style.css文件,在最后面添加css样式:

/** footer menu **/
.footer-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 2;
	background: #fff;
	display: none;
	border-top: 1px solid #ddd;
}

.footer-nav ul li {
	float: left;
	width: 25%;
	text-align: center;
	border-right: 1px solid #ddd;
}

.footer-nav ul li:last-child {
	border-right: 0;
}

.footer-nav ul li a {
	line-height: 35px;
}

.footer-nav ul li a i {
	font-size: 15px !important;
}

没啥好说的,小细节请自行修改。

3

找到自用主题常用的js文件,打开并在其最后添加以下js代码:

// 页脚菜单
$(window).scroll(function () {
	var scrollTop = $(window).scrollTop();
	var $windowHeight = $(window).innerHeight();
	scrollTop > 350 ? $(".footer-nav").fadeIn(200).css("display","block") : $(".footer-nav").fadeOut(200);
});

然后就没然后,有使用cdn的童鞋注意强刷、清除缓存。

至于DEMO?

用手机(移动端)打开龙砚庭站点,下拉有新的事物冒出哦。不信你试试!

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

目前评论:9   其中:访客  5   博主  4

发表评论

莫慌,小狮子正在努力加载评论...
  1. 憧憬点滴记忆
    憧憬点滴记忆1 ( 2018.05.05 18:32:24 )  5楼

    大佬,膜拜膜拜

  2. 雅兮网
    雅兮网1 ( 2018.05.05 11:44:20 )  4楼

    最后面那段js是点睛之笔

  3. 闲鱼
    闲鱼2 ( 2018.05.03 20:24:38 )  地板

    先收藏一下,感觉蛮好的

  4. 西枫里博客
    西枫里博客3 ( 2018.05.03 0:44:13 )  板凳

    关键的还是浮动定位和滚动监听。菜单文字前加个小图标就完美了。

  5. 龙笑天
    龙笑天3 ( 2018.05.02 23:56:46 )  沙发

    咋没上个图啊? :!: PS:好久没评论了,赶紧评论下压压惊~