WAP页面底部添加吸附自适应菜单-Eswlnk Blog
智能摘要 AI
本文介绍了如何为手机端创建一个美观且自适应的下边栏菜单。作者参考了7b2主题的设计，编写了一段自适应代码，并展示了其效果。该菜单在屏幕宽度小于450px时固定在底部，包含五个主要区域：主页、快讯、新增内容（闪烁动画）、专题和我的。每个区域通过图片和文字链接实现导航。代码适用于WordPress自带主题和Panda PRO，但需确保ID和区块无重复问题。实际效果展示了菜单在不同屏幕尺寸下的表现，整体简洁实用。

最近看到7b2手机端的菜单栏，美观吸引人，所以我网上找了段自适应代码，依着葫芦画瓢，照着做了一个,

效果感觉还不错

0x00 目标对象

WAP页面底部添加吸附自适应菜单-Eswlnk Blog

7b2主题这种还监听了页面滑动，我这里就简单处理，只要一个下边栏就行了

大概效果是这样：

WAP页面底部添加吸附自适应菜单-Eswlnk Blog

0x01 文件代码

我没有使用自带的iconfont上的图案，推荐到iconfont.cn去找下适合的图标

我这里只添加了5个区域，有需要的话，可以修改css多弄几个区块

css代码

/*
*自适应下边栏菜单代码
*来源:https://blog.eswlnk.com/765.html
*/

.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: 55px;
    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 img {
    width: 25px !important;
    height: 25px !important;
  }

  .nav>ul {
    position: relative;
    z-index: 1;
    height: 55px;
    background: rgba(255, 255, 255, .85);
    list-style-image: none;
    list-style-type: none;
    margin: 0px;
    padding: 0px !important;
  }

  .nav ul li {
    position: relative;
    float: left;
    width: 20%;
    text-align: center;
    margin: 0px;
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    top: 5px;
    left: 3%;
    font-size: x-small;
    font-weight:bold;
  }
  .tx{
    position: relative;
    float: left;
    width: 20%;
    text-align: center;
    margin: 0px;
    padding: 0px;
    list-style-image: none;
    list-style-type: none;
    top: 10px;
    left: 3%;
    font-size: x-small;
    font-weight:bold;
  }

  .nav ul li a {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }
}

框架

<div class="nav">
  <ul>
    <li> <a href="https://blog.eswlnk.com"><img src="https://static.esw.eswlnk.com/home.png" ></a>
  主页
  </li>
    <li> <a href="https://blog.eswlnk.com/news"><img src="https://static.esw.eswlnk.com/news.png"></a>
  快讯
  </li>
  <span class="tx"> <a href="https://blog.eswlnk.com/post"><img style="animation: blink 1.0s?linear infinite;" src="https://static.esw.eswlnk.com/add.png"></a></span>
    <li> <a href="https://blog.eswlnk.com/all-special"><img src="https://static.esw.eswlnk.com/special.png"></a>
  专题
  </li>
    <li> <a href="https://blog.eswlnk.com/uc"><img src="https://static.esw.eswlnk.com/user.png"></a>
  我的
  </li>
  </ul>
</div>

注：以上代码经过测试适用于wordpress自带主题和Panda PRO，如果出现无法正常显示，请检查id和区块重复问题

0x02 实际效果展示

WAP页面底部添加吸附自适应菜单-Eswlnk Blog