CSS实现手机侧滑

最新推荐文章于 2023-01-29 15:38:16 发布

tyilack_小小黑

最新推荐文章于 2023-01-29 15:38:16 发布

阅读量1k

点赞数

分类专栏： html5 css3 文章标签： html5 css3

本文链接：https://blog.csdn.net/u014520745/article/details/52669201

版权

html5 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css3

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>app-menu</title>
	<style type="text/css">
		.menu {
		    position: fixed;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    overflow: hidden;
		    pointer-events: none;
		    z-index: 150;
		}
		.menu--visible {
		    pointer-events: auto;
		}
		.app-menu {
		    background-color: #fff;
		    color: #fff;
		    position: relative;
		    /*max-width: 400px;*/
		    width: 80%;
			height: 100%;
			background-color: #ddd;
		    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
		    -webkit-transform: translateX(-103%);
		            transform: translateX(-103%);
		    display: flex;
		    flex-direction: column;
		    will-change: transform;
		    z-index: 160;
		    pointer-events: auto;

		    transition: all 0.5s ease-in;
		    transition: all 0.4s ease-out;            
		}
		.menu--visible .app-menu {
		    -webkit-transform: none;
		            transform: none;
		}
		.menu:after {
		    content: '';
		    display: block;
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    background: rgba(0,0,0,0.4);
		    opacity: 0;
		    will-change: opacity;
		    pointer-events: none;
		    transition: opacity 1s cubic-bezier(0,0,0.3,1);
		}
		.menu--visible.menu:after {
		    opacity: 1;
		    pointer-events: auto;
		}
		/* aux */
		body {
		  margin: 0;
		}
		.layout {
		  width: 100%;
		}
		.header {
		  background-color: #ccc;
		}
		.menu-icon {
		  background-color: #b34848;
		  width: 100px;
		  height: 100px;
		}
	</style>
</head>
<body>
<div class="menu">
    <div class="app-menu"></div>
</div>
<div class="layout">
    <div class="header">
        <div class="menu-icon"></div>
    </div>
</div>
</body>
<script src="http://webpic.my4399.com/o2o/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	function toggleClassMenu() {  
	    if(!myMenu.classList.contains("menu--visible")) {       
	        myMenu.classList.add("menu--visible");
	    } else {
	        myMenu.classList.remove('menu--visible');       
	    }   
	}


	var myMenu = document.querySelector(".menu");
	var oppMenu = document.querySelector(".menu-icon");
	oppMenu.addEventListener("click", toggleClassMenu, false);
	myMenu.addEventListener("click", toggleClassMenu, false);
</script>
</html>

参考网站：http://www.zcfy.cc/article/smooth-as-butter-achieving-60-fps-animations-with-css3-1054.html

tyilack_小小黑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现手机侧滑

app-menu .menu { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 150; } .menu--vis
复制链接

扫一扫