鹿白运维 - 无畏者的分享平台
主页 » Typecho教程 » 正文

html新增侧边栏底部菜单功能

/ in Typecho教程

>前言

很多客户说找不到联系方式,其实点击底部森宇就直达联系QQ了,但是感觉不明显

本站新增功能。其他程序需要添加,请自行修改部分代码,个别代码可能冲突。也写成了插件

主要懒得自己写,于是就扒了RiPro-V2侧边栏以及底部菜单,添加到自己的网站了,希望大佬别揍我

>html代码

放在文章底部即可,自己参考位置

<link rel="stylesheet" id="csf-fa5-css"  href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/all.min.css?ver=5.14.0" media="all" />
<link rel="stylesheet" id="csf-fa5-v4-shims-css"  href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.1/css/v4-shims.min.css?ver=5.14.0" media="all" />
<div class="dengcengzhengwen">
<div class="rollbar" style="display: block;">
<ul class="actions">
<li>
<a href="http://www.txee.cn" rel="nofollow noopener noreferrer" data-toggle="tooltip" data-html="true" data-placement="left" title="首页" data-original-title="首页"><i class="fas fa-home">    </i></a>
</li>
<li> <a href="https://www.txee.cn/438.html" rel="nofollow noopener noreferrer" data-toggle="tooltip" data-html="true" data-placement="left" title="VIP会员" data-original-title="VIP会员"><i class="fa fa-diamond"></i></a> 
</li>
<li> <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=49613651&amp;site=qq&amp;menu=yes" rel="nofollow noopener noreferrer" data-toggle="tooltip" data-html="true" data-placement="left" title="联系客服" data-original-title="联系客服"><i class="fab fa-qq"></i></a>
</li>
</ul>
<div id="back-to-top" class="rollbar-item back-to-top"> <button @click="top"> <i class="fas fa-chevron-up"></i></button>
</div>
</div>
</div>
<!--手机端-->
<div class="m-menubar">
<ul>
<li> <a href="https://www.txee.cn/438.html" rel="nofollow noopener noreferrer"><i class="fa fa-diamond"></i>VIP会员</a>
</li>
<li> <a href="http://www.txee.cn" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i>首页</a>
</li>
<li> <button @click="top"> <a class="back-to-top" rel="nofollow noopener noreferrer"><i class="fas fa-chevron-up"></i>顶部<span></span></a></button>
</li>
</ul>
</div>

>css样式

增加了黑夜效果样式,.dark根据自己需求修改

/*底部菜单*/
@media (max-width: 1024px)
.m-menubar {
display: block;
}
.m-menubar {
display: none;
z-index: 99999;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
padding: 5px 0;
}

.m-menubar:before {
content: '1';
color: transparent;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: rgba(0,0,0,0.1);
display: block;
overflow: hidden;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5)
}

.m-menubar ul {
display: flex;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
align-items: center;
}

.m-menubar li {
flex: 1;
text-align: center;
font-size: 12px;
}

.m-menubar li a>i {
margin-bottom: 0;
display: block;
font-size: 20px;
}

.m-menubar li a {
display: block;
margin-top: 5px;
}

.m-menubar li.active a {
color: #007afb
}

.m-menubar li.active a>i {
color: #007afb
}

@media (max-width: 767px) {


.m-menubar {
    display: block;
}
}

.dark .m-menubar{       background: rgba(0, 0, 0, 0.8);
color: white;
box-shadow: 0 0 6px 1px rgb(100,100,100);
-webkit-box-shadow: 0 0 6px 1px rgb(100,100,100);}

/*  新增侧边栏*/
@media screen and (max-width: 1024px)
.dengcengzhengwen {
display: none;
}


.rollbar {
position: fixed;
top: 40%;
width: 40px;
right: 0;
line-height: 60px;
border: 1px solid #eee;
border-right: 0;
border-radius: 5px 0 0 5px;
z-index: 999;
background: #fff;
text-align: center;
-webkit-box-shadow: -3px 0 10px -2px rgb(0 0 0 / 10%);
box-shadow: -3px 0 10px -2px rgb(0 0 0 / 10%);
display: none;

}

.dark .rollbar{       background: rgba(0, 0, 0, 0.5);
color: white;
box-shadow: 0 0 6px 1px rgb(100,100,100);
-webkit-box-shadow: 0 0 6px 1px rgb(100,100,100);}
.dark .rollbar .rollbar-item i{
   color: #00ffc4;
}

.rollbar .actions {
position: relative;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}

.rollbar .actions li {
position: relative;
list-style: none;
}



.rollbar .actions li:hover {
opacity: .8;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}

.rollbar .actions li>a {
display: block;
cursor: pointer;
position: relative;
border: 0;
opacity: 1;
width: 100%;
text-align: center;
line-height: 40px;
}

.rollbar .actions li>a .spinner-grow {
position: absolute;
left: 5px;
top: -15px;
width: 8px;
height: 8px;
background-color: #4CAF50;
}

.rollbar .actions li a.burger:before, .rollbar .actions li a.burger:after {
display: none;
}

.rollbar .rollbar-item {
 position: relative; 
 text-align: center; 
 cursor: pointer; 
 -webkit-transition: all .3s ease-in-out; 
-o-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out; 
 display: block; 
 line-height: 40px; 
 margin: 5px; 
 border-top: solid rgb(214 214 214 / 50%) 2px; 
}

.rollbar .rollbar-item i {
-webkit-animation: flashing 1.5s infinite linear;
animation: flashing 1.5s infinite linear;
color: #ff3333;
}


.rollbar .rollbar-item:hover {
opacity: .8;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}

#back-to-top.-right-full{
right: -100% !important;
}

>ps

也制作成了typecho插件,原版的html没备份,根据记忆还原了一下,大概也就是这样,自己看着修改吧。关于插件这几天有时间发出来

猜你喜欢
评论 (0)
隐私评论
搜索
0:00