EMLOG底部菜单栏优化代码

  • 内容
  • 相关

说明

用法,放在模板heard,footer,系统设置随便一个地方都可以。

代码

<style type="text/css">.nav{display:none;}@media screen and (min-width:767px){#mobile-footer{display:none}}

#mobile-footer{height:60px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999}

#mobile-menu{display:block}

#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}</style>
<div id="mobile-footer">

   


    <ul id="mobile-menu">


        <li> <a href="https://www.yudzy.com"> <span class="fa fa-home"></span> 首页 </a></li>

       

        <li> <a href="https://www.yudzy.com"> <span class="fa fa-qrcode"></span> 微信咨询</a></li>

<li> <a href="javascript:;" class="search-show active"> <span class="fa fa-search"> </span> 搜索 </a></li>



        <li> <a href="javascript:;" class="user-reg" data-sign="1"> <span class="fa fa-user-plus"></span> 注册 </a></li>

        <li> <a href="javascript:(scrollTo());";class="user-login" data-sign="0"><span class="fa fa-angle-up"></span> 回顶部 </a></li>

</ul>

</div>
<br> <br> <br> <br>
            



如果你觉得雨滴资源网对你有帮助的话,可以小小的打赏一下小站,用于维持本站的运营!

本文标签:

版权声明:雨滴资源网内容来源于互联网,如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!

本文链接:EMLOG底部菜单栏优化代码 - https://www.yudzy.com/899.html

失效提示:此文更新于2019-9-25,如果文章内容或图片资源失效,请留言反馈,客服会及时处理,谢谢!