移动端侧滑导航代码

最新推荐文章于 2023-07-14 18:34:55 发布

陈先生。

最新推荐文章于 2023-07-14 18:34:55 发布

阅读量418

点赞数

文章标签：移动端侧滑导航前端 IT

本文链接：https://blog.csdn.net/qq_40548277/article/details/83386787

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html{font-size: 62.5%;}
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 1.5rem;
				color: #333333;
				background: white;
				height: 100%;
			}
			html,body{
				height: 100%;
			}
			header,footer{
				position: fixed;
				left: 0;
				right: 0;
				text-align: center;
				height: 44px;
				line-height: 44px;
				z-index: 1;
				background: blue;
				color: white;
			}
			header{
				border-bottom: 2px black solid;
				top: 0;
			}
			footer{
				border-top: 2px black solid;
				bottom: 0;
				}
			.page-title{
				font-size: 1.8rem;
				font-weight: normal;
			}
			.btn-slide-bar{
				width: 44px;
				height: 44px;
				display: block;
				float: left;
				line-height: 2.8;
				cursor: pointer;/*鼠标变手*/
			}
			.btn-slide-bar::after{/*面包屑导航*/
				content: "";
				width: 20px;
				height: 2px;
				background: #999;
				display: inline-block; /*文字属性*/
				box-shadow:0 7px 0 #999,0 -7px 0 #999;
			}
			.parwer-page{
				position: absolute;
				top: 44px;
				right: 0;
				left: 0;
				overflow: hidden;
			}
			.slide-bar{
				position: absolute;
				top: -1px;
				bottom: -1px;
				background: #333333;
				width: 150px;
				left: 0;
				z-index: 2;
				transform: translateX(-150px);
				-moz-transform: translateX(-150px);
				-o-transform: translateX(-150px);
				-webkit-transform: translateX(-150px);
				-ms-transform: translateX(-150px);
				
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
			}
			.slide-bar li{
				list-style: none;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: white;
				border-bottom: 2px solid #000000;
			}
			body{
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2 ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
			}
			body.active{
				transform: translateX(150px);
				-moz-transform: translateX(150px);
				-o-transform: translateX(150px);
				-webkit-transform: translateX(150px);
				-ms-transform: translateX(150px);
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
			}
		</style>
	</head>

	<body>
		<header>
			<span class="btn-slide-bar">
				
			</span>
			<h1 class="page-title">
				首页
			</h1>
		</header>
		<section class="parwer-page">内容</section>
		<footer>底部</footer>
		<section class="slide-bar">
			<ul>
				<li>css</li>
				<li>js</li>
				<li>html</li>
				<li>node</li>
			</ul>
		</section>
		<script type="text/javascript">
			//将我们的dom树加载完毕以后执行 它不会去理会js ，css 图像 是否加载完毕
			 document.addEventListener("DOMContentLoaded",function(){
			 	 (function(){
			 	 	  var _btn = document.querySelector(".btn-slide-bar"),
			 	 	      _body = document.querySelector("body");
			 	 	      
			 	 	      _btn.onclick = function(){
			 	 	      	_body.classList.toggle("active")
			 	 	      }
			 	 })(window)
			 })
		</script>
	</body>

</html>

陈先生。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端侧滑导航代码

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; html{font-size: 62.5%;} *{
复制链接

扫一扫