jQuery
【jQuery】レスポンシブアニメーションオフキャンバスメニューOff Canvas Menu
July 27, 2018

Off Canvas Menuはレスポンシブアニメーションオフキャンバスメニュー。
<div class="page"> <span class="menu_toggle"> <i class="menu_open fa fa-bars fa-lg"></i> <i class="menu_close fa fa-times fa-lg"></i> </span> <ul class="menu_items"> <li><a href="#">Home</a></li> <li><a href="#">Info</a></li> <li><a href="#">About</a></li> <li><a href="#">Contacts</a></li> </ul> <menu class="content"> <div class="content_inner"> <h1>Responsive Animated Off Canvas Menu</h1> <p>Lorem ipsum ...</p> </div> </menu> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> var $page = $('.page'); $('.menu_toggle').on('click', function() { $page.toggleClass('shazam'); }); $('.content').on('click', function(){ $page.removeClass('shazam'); }); </script>