最近看到7b2手机端的菜单栏,美观吸引人,所以我网上找了段自适应代码,依着葫芦画瓢,照着做了一个,
效果感觉还不错
0x00 目标对象
![WAP页面底部添加吸附自适应菜单插图 WAP页面底部添加吸附自适应菜单插图](https://static.esw.eswlnk.com/2021/07/2021072406114952.png)
7b2主题这种还监听了页面滑动,我这里就简单处理,只要一个下边栏就行了
大概效果是这样:
![WAP页面底部添加吸附自适应菜单插图1 WAP页面底部添加吸附自适应菜单插图1](https://static.esw.eswlnk.com/2021/07/2021072406162371.png)
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页面底部添加吸附自适应菜单插图2 WAP页面底部添加吸附自适应菜单插图2](https://static.esw.eswlnk.com/2021/07/2021072406271749.gif)
感谢7b2主题的相关代码