左侧菜单收拉——模板

最新推荐文章于 2023-08-28 17:27:33 发布

dongsdh

最新推荐文章于 2023-08-28 17:27:33 发布

阅读量317

点赞数

分类专栏：菜单文章标签： css html html5

本文链接：https://blog.csdn.net/dongsdh/article/details/83112478

版权

菜单专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：做好模板随时用

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
		body{  
    line-height:1.4;  
    color:#333;  
    font-family:arial;  
    font-size: 12px;  
}  
input,textarea,select{  
    font-size:100%;      
    font-family:inherit;  
}  
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{  
    margin:0;  
}  
h4,h5,h6{  
    font-size:1em;  
}  
ul,ol{  
    padding-left:0;   
    list-style-type:none;  
}  
img{border:0;}  
a{
	color: #5f5f5f;
}
a, a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

/*样式start*/
.box{
	border: 1px solid red;
	height: 300px;
}
.box1{
	position: relative;
	width: 200px;
	border:1px solid green;
	height: 200px;
	float: left;
}
.box1 .showorhide{
	
    display: inline-block;
    width: 14px;
    height: 25px;
    background: url(65.png)no-repeat;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%,-50%);
    cursor: pointer;
}
.box2{
	background: cyan;
	margin-left: 210px;
}
.hide2{
	    margin-left: -201px;
}
.box2show{
	    margin-left: 20px;
}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1">
			<ul>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
			</ul>
			<div class="showorhide"></div>
		</div>
		<div class="box2">
			<div>内容</div>
			<div>内容</div>
			<div>内容</div>
			<div>内容</div>
		</div>
	</div>
	
	<script src="jquery-3.1.1.min.js"></script>
	<script>
		$(".box").on("click",".showorhide",function(e){
		  e.preventDefault(); 
		  $(".box1 ").toggleClass("hide2");
		  $(".box2").toggleClass("box2show");
		})
	</script>
</body>
</html>

效果：

dongsdh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左侧菜单收拉——模板

前言：做好模板随时用&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body{ line-heig
复制链接

扫一扫