[backcolor=rgba(255, 255, 255, 0.98)]作者:鹏仔
[backcolor=rgba(255, 255, 255, 0.98)]html+css+js实现一个侧边栏自定义导航,可用于引导用户,或者广告等都是可以的。
代码分享给大家,请自行复制使用。
CSS代码
.left-box-btn {
width:20px;
padding:5px 0;
background:#6F8EC5;
color:#fff;
font-size:16px;
font-weight:bold;
text-align:center;
position:fixed;
top:300px;
left:0;
border-top-right-radius:6px;
border-bottom-right-radius:6px;
cursor:pointer;
}
.left-box-btn:hover {
transition:all 1.3s;
background:#9E61A9;
}
.left-box {
width:120px;
position:fixed;
top:100px;
left:0;
z-index:8888;
box-shadow:1px 1px 1px #000;
display:none;
}
.left-box-a {
color:#fff;
font-size:16px;
font-weight:bold;
line-height:35px;
text-align:center;
text-decoration:none;
display:block;
width:100%;
height:35px;
background:#000;
}
.left-box-a:hover {
transition:all 1s;
background:#6F8EC5;
}
#TpShutDown {
color:#fff;
font-size:14px;
line-height:25px;
font-weight:bold;
display:block;
text-align:center;
width:50%;
height:25px;
background:#6F8EC5;
position:absolute;
top:-25px;
right:0;
border-top-left-radius:6px;
border-top-right-radius:6px;
cursor:pointer;
}
#TpShutDown:hover {
background:#9E61A9;
}
Markup代码
<div class="left-box-btn" id="TpLeftBoxBtn">展开</div>
<div class="left-box" id="TpLeftBox">
<span id="TpShutDown">关闭</span>
<a class="left-box-a" target="_blank" href="#">提交收录</a>
<a class="left-box-a" target="_blank" href="#">审核状态</a>
<a class="left-box-a" target="_blank" href="#">SEO实战</a>
<a class="left-box-a" target="_blank" href="#">SEO外链</a>
<a class="left-box-a" target="_blank" href="#">在线工具</a>
<a class="left-box-a" target="_blank" href="#">在线音乐</a>
<a class="left-box-a" target="_blank" href="#">模板之家</a>
<a class="left-box-a" target="_blank" href="#">线报之家</a>
<a class="left-box-a" target="_blank" href="#">资源大全</a>
<a class="left-box-a" target="_blank" href="#">骗子公布</a>
<a class="left-box-a" target="_blank" href="#">登录&注册</a>
</div>
JavaScript代码
var TpLeftBox = document.getElementById('TpLeftBox');
var TpShutDown = document.getElementById('TpShutDown');
var TpLeftBoxBtn = document.getElementById('TpLeftBoxBtn');
TpShutDown.onclick = function() {
TpLeftBox.style.display = 'none';
TpLeftBoxBtn.style.display = 'block';
}
TpLeftBoxBtn.onclick = function() {
TpLeftBox.style.display = 'block';
TpLeftBoxBtn.style.display = 'none';
}