给力购

Emlog技巧丨网站给手机版底部加上自适应菜单功能

【摘要】首先来看看效果图:当然,底部菜单的名称、图标这些都是可以修改的。教程开始:一:找到模板文件:footer.php在适当位置添加如下代码:<divid="mobile-footer"><ulid="mobile-menu...

首先来看看效果图:


当然,底部菜单的名称、图标这些都是可以修改的。

教程开始:

一:找到模板文件:footer.php

在适当位置添加如下代码:

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="<?php echo BLOG_URL; ?>"> <span class="fa fa-home"></span> 首页 </a></li>
        <li> <a href="http://tao.52zyb.cn/"target="_blank"> <span class="fa fa-shopping-cart"></span> 优惠券 </a></li>
        <li> <a href="<?php echo BLOG_URL; ?>?search"> <span class="fa fa-search"></span> 搜索 </a></li>
        <li> <a href="<?php echo BLOG_URL; ?>guest.html"> <span class="fa fa-comments"></span> 留言 </a></li>
        <li> <a href="<?php echo BLOG_URL; ?>ad.html"> <span class="fa fa-heartbeat"></span> 广告合作 </a></li>
    </ul>
</div>

注:如遇样式冲突,请确定div标签内id属性是否为唯一。

二:找到模板核心CSS样式文件。

本站用的dydux核心文件在style目录下的main.css文件

在适当位置添加如下代码:

/*手机底部CSS代码*/
@media screen and (min-width:767px){#mobile-footer{display:none}}
#mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999}
#mobile-menu{display:block!important}
#mobile-menu:after{content:'';display:block;height:0;clear:both}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%}
#mobile-menu>li>a:hover{color:#000;}
#mobile-menu>li>.active{color:#000;}
#mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}

注:如前面id修改了,CSS代码中也要相对应的进行修改。

三:打开引入样式的PHP文件

一般是header.php文件,找到引入style/main.css?ver=2.5"这一行,把后面的版本?ver=??数字修改多一位,如本站?ver=2.5就修改成ver=2.6

一般到这一步就基本上完成了。

但本站的footer文件有点特殊,导航栏在手机浏览下会遮挡住footer部分,这时候还需要在添加一个空的div标签代码如下:

<div id="mobile-footer-kb">
</div>

然后在main.css文件中添加自适应即可:

@media screen and (min-width:767px){#mobile-footer-kb{display:none}}
#mobile-footer-kb{height:50px}

如果不生效请参照第三部,把main.css版本号+1即可。

ICO图标参考地址:http://www.fontawesome.com.cn/faicons/

还有一种更简单的写法:

直接在Footer文件中引入如下代码:

具体效果空白也没有进行测试,可以自行查看测试:

<style type="text/css">.mobile-footer{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.mobile-footer{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.mobile-footer{padding-left:0;margin-bottom:0;list-style:none;}.mobile-footer img{width:50px !important;height:50px !important;}.mobile-footer > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.85);list-style-image:none;list-style-type:none;margin:0px;padding:0px !important;}.mobile-footer ul li{position:relative;float:left;width:20%;text-align:center;margin:0px;padding:0px;list-style-image:none;list-style-type:none;top:0px;left:3%;}.mobile-footer ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>

<div class="mobile-footer">
  <ul>
        <li><a href="<?php echo BLOG_URL; ?>"> <span class="fa fa-home"></span> 首页 </a></li>
        <li><a href="http://tao.52zyb.cn/"target="_blank"> <span class="fa fa-shopping-cart"></span> 优惠券 </a></li>
        <li><a href="<?php echo BLOG_URL; ?>?search"> <span class="fa fa-search"></span> 搜索 </a></li>
        <li><a href="<?php echo BLOG_URL; ?>guest.html"> <span class="fa fa-comments"></span> 留言 </a></li>
        <li><a href="<?php echo BLOG_URL; ?>ad.html"> <span class="fa fa-heartbeat"></span> 广告合作 </a></li>
    </ul>
</div>

此方法不仅仅适用于Emlog,任意网页都可生效,具体只要修改其中几个参数即可。


 空白
 简介:我爱资源吧(www.52zyb.cn)免费资源分享平台 - 免费QQ活动,QQ资讯共享 - 好东西不私藏!

给力购

发表评论

游客
送你一朵小花花~

帅人已评(1)

感谢站长教程嗷
LV 1 a&#39;ゞ 打驴 4个月前 (2019-06-27) 回复