jQuery

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

July 27, 2018

Off Canvas Menuはレスポンシブアニメーションオフキャンバスメニュー。

HTML

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

Download