给网站添加一个侧边栏导航菜单 可展开或隐藏

百变鹏仔 7天前 33

爱Q站 网站侧边栏导航


大概写的一个效果,需要自行复制粘贴就行,安排。

不会添加可请喝奶茶协助哦

作者QQ:344225443


CSS
<style>
.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;
}
</style>
HTML
<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="#">登录&amp;注册</a></div>
JS
<script>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';
    }
</script>


最新回复 (0)
    • 新势之家 - 站长基地|站长之家|源码下载|资源论坛|wap站长网
      2
        立即登陆 加入我们 QQ登陆
返回
发新帖