<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>右侧划出</title>
<style>
.menu-mobile { position: fixed; right: -200px; width: 260px; height: 100%; top: 0; z-index: 10; text-align: left; }
.menu-mobile.menu-open { right: 0px; }
.menu-wrap { position: absolute; top: 0; left: 60px; background: #1a1a1a; width: 200px; height: 100%; }
.menu-close { cursor: pointer; display: block; position: absolute; font-size: 14px; color: #808080; width: 40px; height: 40px; line-height: 40px; top: 20px; right: 5px; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.menu-close:hover { color: #ffffff; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.body-push-toright { left: 200px; }
.body-push-toleft { left: -200px; }
.menu-mobile { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
#menuToggle { position: absolute; top: 20px; left: 0; z-index: 11; display: block; text-align: center; font-size: 14px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; cursor: pointer; background: rgba(0, 0, 0, 0.25); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
#menuToggle:hover { color: #ffffff; background: rgba(0, 0, 0, 0.2); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
.menu-wrap ul li { list-style: none; color: #fff; }
</style>
</head>
<body>
<nav class="menu-mobile" id="menu-mobile">
<div class="menu-wrap">
<i class="menu-close">close</i>
<ul>
<li><span>111</span></li>
<li><span>222</span></li>
<li><span>333</span></li>
</ul>
</div>
<div id="menuToggle"><i>22</i></div>
</nav>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</body>
<script>
$(‘#menuToggle, .menu-close‘).on(‘click‘, function() {
$(‘#menuToggle‘).toggleClass(‘active‘);
$(‘body‘).toggleClass(‘body-push-toleft‘);
$(‘#menu-mobile‘).toggleClass(‘menu-open‘);
});
</script>
</body>
</html>
时间： 2024-10-07 20:06:32