B005 WordPress如何给移动端底部添加导航菜单

要求

在手机或其他移动设备打开此页面时,底端也可以有一个导航栏,这个导航栏内容可以进行如个人中心、快速回到主页等等设置。

代码

代码内容需要:HTML+CSS

<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 rgb(238, 238, 255);
    -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:70px !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>
<!--Slivaacom-->
<div class="nav">
    <ul>
    <li> <a href="https://slivaa.com/***/" target="_blank"><span class="font-text"><i class="***"></i> <span class="font-text">***</span></span></a></li>
    <li> <a href="https://slivaa.com/***/" target="_blank"><span class="font-text"><i class="***"></i> <span class="font-text">***</span></span></a></li>

如图,其中,这里的标签内容可以更具自己的内容进行更改,这是没有任何问题的。

 

声明:本站所有软件、课程、素材等资源全部来源于互联网,从本站下载资源,说明你已同意本条款。如若本站内容侵犯了原著者的合法权益,请携带版权证明与我们联系,我们会及时处理。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录