⎛⎝WordPress⎠⎞添加好看的移动端底部菜单导航

少羽.
少羽.
少羽.
433
文章
90
评论
2020年5月12日23:46:38 评论 351 1709字阅读5分41秒
广告也精彩

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

代码:

    <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: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>
    <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.lurbk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly93d3cubHVyeWwuY29tL3FsLmh0bWw="><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.lurbk.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly93d3cubHVyeWwuY29tL3Fxby5odG1s"><span class="font-text"><i class="iconfont icon-liuyan"></i> <span class="font-text">留言</span></span></a></li>
    </ul>
    </div>
继续阅读
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
广告也精彩
少羽.
  • 本文由 发表于 2020年5月12日23:46:38
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
简单实现wordpess博客花瓣飘落特效调用版 WordPress

简单实现wordpess博客花瓣飘落特效调用版

简单实现wordpess博客花瓣飘落特效调用版,代码全部集成,只需调用一个js文件即可,无需其它代码,代码来自鸟叔博客,修改了一下调用。 使用:直接把下面代码丢到主题页脚文件(footer.php)即...
WordPress纯代码实现独立相册功能 WordPress

WordPress纯代码实现独立相册功能

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧! 想到这个文章,我忘记发了,今天就补上 hhh 正文 思路是前段时间写模板琢磨出来的,模板写废了,也不准备写...
广告也精彩
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: