[精彩网文] WP移动端增加好看的底部菜单栏
作者:精品下载站 日期:2020-11-14 17:47:27 浏览:86 分类:网文网语
WordPress添加好看的移动端底部菜单导航,以前也分享过一个导航,不过那个不太好看,这里在分享一个导航在电脑端不显示,手机端显示,其它系统程序也可以用,把代码添加到主题的页脚文件就可以啦,CSS样式可能会和你的主题冲突自己改改吧。
页脚文件目录:/wp-content/themes/主题名/footer.php
<!--底部菜单栏开始--> <style type="text/css"> .nav{ display:none; } @media only screen and (max-width:450px){ .site-info{ padding:15px 0 58px 0; } #advert_widget, .php_text .widget-text, .widget .textwidget{ padding:0; } .nav{ position:fixed; z-index:999; bottom:0; width:100%; height:40px; display:block; right:0; box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); -ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0); } .nav{ padding-left:0; margin-bottom:0; list-style:none; } .nav span{ width:50px !important; height:50px !important; } .font-text { margin: 0 0 0 5px; color: #1ba1e2; } .nav > ul{ position:relative; z-index:1; height:40px; background: rgba(255,255,255,.85); list-style-type:none; margin:0px; padding:0px!important; } .nav ul li{ position:relative; float:left; width:25%; text-align:center; margin:0px; padding:0px list-style-type:none; top:10px; } .nav ul li a{ display:block; margin-right:auto; margin-left:auto; } } </style> <div class="nav"> <ul> <li> <a href="/"><span class="font-text"><i class="fa fa-asterisk" aria-hidden="true"></i><span class="font-text">按钮1</span></span></a></li> <li> <a href="/"><span class="font-text"><i class="fa fa-adjust" aria-hidden="true"></i><span class="font-text">按钮2</span></span></a></li> <li> <a href="/"><span class="font-text"><i class="fa fa-book" aria-hidden="true"></i><span class="font-text">按钮3</span></span></a></li> <li> <a href="/"><span class="font-text"><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i><span class="font-text">按钮4</span></span></a></li> </ul> </div> <link rel="stylesheet" href="http://www.sey.ink/font-awesome/css/font-awesome.min.css"> <!--底部菜单结束-->
图标采用Font Awesome,修改图标方法非常简单只需要修改<li></li>中的<i></i>即可,修改图标参照图标代码点我查看支持图标
![[精彩网文] WP移动端增加好看的底部菜单栏](https://www.cdz432.com/zb_users/upload/2022/11/20221115010233166844535317814.png)
双击代码进入编辑模式快速全选复制~
猜你还喜欢
- 05-21 [影视资讯] 《最后生还者》游戏 vs 电视剧:第二季第三集与游戏的 6 大不同之处
- 05-21 [影视资讯] 海军罪案调查处:起源 结局解析——第一季最大爆料和第二季预测
- 05-21 [影视资讯] 《最后生还者:赛拉菲特》教派解析——符号含义、面部标记、先知与游戏关联
- 05-21 [影视资讯] 《你》第五季主演是谁?最终季完整角色及演员阵容解析
- 05-21 [影视资讯] 《你》第五季结局解析:乔·戈德堡最终得到了应有的惩罚吗?
- 05-21 [影视资讯] 《最后生还者》中每个令人毛骨悚然的感染阶段详解:从跑步者到鼠王
- 05-21 [影视资讯] 《心脏骤停》大结局:第四季即将上映?为何要拍电影?
- 05-21 [影视资讯] 《夜魔侠:重生》第一季结局解析——黑暗时代开始
- 05-21 [影视资讯] 《最后生还者》第二季第二集:剧集与游戏的差异揭晓
- 05-21 [影视资讯] 《最后生还者》第二季原声带:每集歌曲解析
- 05-21 [影视资讯] 哈利·波特电视剧:上映日期、演员阵容、剧情、时间线以及我们所知道的一切
- 05-21 [影视资讯] 超人预告片终于来了:您可能会错过的隐藏细节!
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[影视] 黑道中人 Alto Knights(2025)剧情 犯罪 历史 电影
[古装剧] [七侠五义][全75集][WEB-MP4/76G][国语无字][1080P][焦恩俊经典]
[实用软件] 虚拟手机号 电话 验证码 注册
[电视剧] 安眠书店/你 第五季 You Season 5 (2025) 【全10集】
[电视剧] 棋士(2025) 4K 1080P【全22集】悬疑 犯罪 王宝强 陈明昊
[软件合集] 25年6月5日 精选软件22个
[软件合集] 25年6月4日 精选软件36个
[短剧] 2025年06月04日 精选+付费短剧推荐33部
[短剧] 2025年06月03日 精选+付费短剧推荐25部
[软件合集] 25年6月3日 精选软件44个
[剧集] [央视][笑傲江湖][2001][DVD-RMVB][高清][40集全]李亚鹏、许晴、苗乙乙
[电视剧] 欢乐颂.5部全 (2016-2024)
[电视剧] [突围] [45集全] [WEB-MP4/每集1.5GB] [国语/内嵌中文字幕] [4K-2160P] [无水印]
[影视] 【稀有资源】香港老片 艺坛照妖镜之96应召名册 (1996)
[剧集] 神经风云(2023)(完结).4K
[剧集] [BT] [TVB] [黑夜彩虹(2003)] [全21集] [粤语中字] [TV-RMVB]
[实用软件] 虚拟手机号 电话 验证码 注册
[资源] B站充电视频合集,包含多位重量级up主,全是大佬真金白银买来的~【99GB】
[影视] 内地绝版高清录像带 [mpg]
[书籍] 古今奇书禁书三教九流资料大合集 猎奇必备珍藏资源PDF版 1.14G
[电视剧] [突围] [45集全] [WEB-MP4/每集1.5GB] [国语/内嵌中文字幕] [4K-2160P] [无水印]
[剧集] [央视][笑傲江湖][2001][DVD-RMVB][高清][40集全]李亚鹏、许晴、苗乙乙
[电影] 美国队长4 4K原盘REMUX 杜比视界 内封简繁英双语字幕 49G
[电影] 死神来了(1-6)大合集!
[软件合集] 25年05月13日 精选软件16个
[精品软件] 25年05月15日 精选软件18个
[绝版资源] 南与北 第1-2季 合集 North and South (1985) /美国/豆瓣: 8.8[1080P][中文字幕]
[软件] 25年05月14日 精选软件57个
[短剧] 2025年05月14日 精选+付费短剧推荐39部
[短剧] 2025年05月15日 精选+付费短剧推荐36部
- 最新评论
-
- 热门tag