看到很多博客移动端底部都有单独的导航菜单,体验还不错,九哥亲测可用,这里把实现方法分享给小伙伴们。
1.效果展示
2.实现方法
HTML代码
- <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:20%;
- text-align:center;
- margin:0px;
- padding:0px
- list-style-type:none;
- top:5px;
- }
- .nav ul li a{
- display:block;
- margin-right:auto;
- margin-left:auto;
- }
- }
- </style>
- <div class="nav">
- <ul>
- <li> <a href="http://www.99bsy.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
- <li> <a href="http://www.99bsy.com/xinyu.html"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
- <li> <a href="http://www.99bsy.com/links.html"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
- <li> <a href="http://www.99bsy.com/liuyan.html"><span class="font-text"><i class="fa-comment-o fa"></i> 留言</span></a></li>
- <li> <a href="http://www.99bsy.com/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
- </ul>
- </div>
使用方法
后台→外观→小工具→增强文本→页脚小工具→内容:复制粘贴以上代码保存即可。
当然,导航菜单也可以使用图片,小伙伴们可以自行研究,也很简单。
相关推荐:

现在很多博客导航都非常炫酷,九哥也是不想千篇一律,这里就分享两种鼠标划过导航菜单的特效教程,效果很炫酷的,小伙伴们可以自行体验下。 特效一 一:设置 后台→外观→菜单,点击右上角的“显示选...

小算草微信公众号
扫一扫关注小算草微信公众号,打开微信简简单单即可查看小算草所有内容,更快捷更方便。
2018年12月24日 07:56
自己移动端的导航很难看,学习了,一会试下!
2018年12月25日 15:36
@极乐 嗯嗯,我这个简洁大方,哈哈!
2018年11月10日 21:23
如果想调节窗口的高度,还有图标字体大小,该换哪些参数呢?要是能把每行代码的意思注释下,我们这些不懂代码的小白就知道该怎么替换了!博主能在上一篇带注释版本的教程吗?
2018年11月12日 07:51
@KK 都是英文,百度下,很简单的。
2018年6月28日 12:40
博主,你好,请问那个增强文本--页脚小工具在哪里的呢?我看了小工具那里只有文本并没有超级文本啊,也没看到页脚小工具,是要下插件吗?
2018年7月1日 09:40
@QQ游客 文本如果支持代码也可以。
主题不一样吧应该,你可以直接添加到页脚文件 footer.php 里面。
2018年11月10日 21:16
@QQ游客 试了下,可以显示,可惜用在我的网站上,总体显得不太搭配,我自己又不懂代码...
2018年11月12日 07:50
@QQ游客 你的是鸟哥主题吗?其他主题添加到页底文件里面。
2018年6月26日 22:05
大神,代码不太懂,下面的链接和对应的文本倒是会换,其他需要换吗?能说明一下吗?蓝色字的都要替换还是怎样?
2018年6月26日 22:06
@Him 或者能加个QQ之类的指导一下吗
2018年6月28日 07:43
@Him 只需把链接改成你的就可以了。
2018年6月6日 19:07
怎么有一个错误,惭愧,又不懂脚本!九哥求救!
2018年6月7日 13:37
@血月刀 什么错误?
2017年11月22日 18:40
现在挺羡慕博主还有折腾的心和精力啊,我都打王者荣耀了。
2017年11月22日 20:15
@Koolight 我也很少折腾了,时间有限,游戏就更没时间玩了
2017年10月18日 16:38
正是我需要的
2017年10月17日 11:30
现在不显示了,是不是你停止用了呀。
2017年10月17日 11:49
@小小参谋 就是截图让大家看效果的,我没想用。
2017年10月17日 10:59
有技术就是好。
代码看不懂啊。学习。
2017年10月17日 11:14
@电炖锅的那些事 一知半解,互相学习。
2017年10月16日 11:25
这样方便多了
2017年10月16日 12:47
@小萝博客 可以提供几个常用菜单在下面,体验不错的。
2017年10月16日 10:59
不错,其实直接在页脚显示菜单,页头就显示logo就行,这样看起来确实不错。头条号和微信号好像都是这样
2017年10月16日 11:12
@懿古今 是啊,要么页头要么页脚,看个人喜好了。
2017年10月16日 00:21
还有这种玩法,厉害了!自适应得很到位!
2017年10月16日 09:32
@Koolight 嗯,挺简单的,可以自己DIY。
2017年10月14日 09:34
很不错,又学习一招,转载
2017年10月14日 08:12
噢 学习学习