<!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>