WordPress美化-移动端底部添加好看的菜单导航

作者 : 阿灿 本文共1758个字,预计阅读时间需要5分钟 发布时间: 2020-12-7 共200人阅读

WordPress添加好看的移动端底部菜单导航,这里在分享一个导航在电脑端不显示,手机端显示,其它系统程序也可以用,把代码添加到主题的页脚文件就可以啦,CSS样式可能会和你的主题冲突自己改改吧。

html代码:

 <div class="nav">
    <ul>
    <li> <a href="/"><span class="font-text"><i class="iconfont icon-shouye"></i> <span class="font-text">首页</span></span></a></li>
    <li> <a href="javascript:switchNightMode()" target="_self"><span class="font-text"><i class="be be-loader"></i> <span class="font-text">夜间</span></span></a></li>
    <li> <a rel="external nofollow" target="_blank" href="https://www.www.wzwco.com/go.php?url="><span class="font-text"><i class="iconfont icon-weiyuqiang-"></i> <span class="font-text">微语</span></span></a></li>
    <li> <a rel="external nofollow" target="_blank" href="https://www.www.wzwco.com/go.php?url="><span class="font-text"><i class="iconfont icon-liuyan"></i> <span class="font-text">留言</span></span></a></li>
    </ul>
    </div>

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;
    }
    }
爱搜社,一个专注收集和分享网络源码资源的网站,建站辅导首选爱搜社
爱搜社 » WordPress美化-移动端底部添加好看的菜单导航

常见问题FAQ

如何通过本站投稿资源与作品?
本站为开放式资源共享平台,用户可通过后台或者联系站长进行发稿,同时可设置为收费作品,平台将收取百分之十的手续费,作品不得发布违禁,违法内容与广告,如被查出有关于黄赌毒等违法内容,平台将永久封禁帐号,并配合公安机关提供用户信息!
下载后的资源如何使用?
本站所有资源来源于网络,资源的使用一般附带在文章中,如果依旧不会使用 请联系作者或者寻求度娘帮助
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源均来自互联网仅供学习,版权属于原作者所有!本站所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。如有侵权请联系Email:85136926@qq.com 并附上相关证明 24小时内给予删除!