网站侧边可收缩的自定义导航分类代码

网络教程4周前38

html+css+js实现一个侧边栏自定义导航,可用于引导用户,或者广告等都是可以的。

.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;}
<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>
 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';
    }


相关文章

吴恩达:机器学习经典名课吴恩达:机器学习经典名课

吴恩达:机器学习经典名课

教程引见本课程将普及推荐呆板学习、数据开采和统计模式辨认等内容,同时还引用了很多呆板学习案例,让你学会在智能机械人(感知和控制)、文本知道(网络搜寻和废物邮件过滤)、筹划机视觉、医学信息学、音频、数据...

禁用wordpress gravatar头像-改为使用本地头像提高网页打开速度

WordPress默认的头像是读取gravatar.com上的图片的,对于国内用户来说会使网页打开速度变慢。所以我决定删除掉这块功能。修改get_avatar函数,在wp-includes/plugg...

SAI 绘图软件+笔刷+教程SAI 绘图软件+笔刷+教程

SAI 绘图软件+笔刷+教程

 SAI绘画软件一贯以来都是很多插画师首选的绘画对象,这款软件兼容简直一切型号的绘画板,经过SAI绘画软件可以很好的呈现出CG品格和水彩品格,在线条绘制方面比眼下已用过的任何软件都更****...

EthankDesign UI设计进阶班3期EthankDesign UI设计进阶班3期

EthankDesign UI设计进阶班3期

教程引见28节课环环相扣,相连周密,优质的教授体系,恰当有职业体验或计划类专业学子学习,需求有Photoshop和Sketch操纵根基。学习住址百度:https://pan.baidu.com/s/1...

WordPress调用某年某月文章的SQL语句代码

利用$wpdb自定义查询可以调用某年下的月份归档, 例如调用2014年月份归档的代码如下所示// Get archive by year global&nbs...

WordPress自定义函数控制文章标题长度

WordPress显示文章标题的时候,当文章标题过长而且文章的标题又在主页显示时,如果发生换行的现象就显得不美观了,这时候除了利用CSS来控制文章标题长度外,还可以通过一个简单的php函数来控制。在w...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。