jQuery

【jQuery】最新のブラウザをサポートしているオフキャンバスメニュープラグインflyPanels

February 7, 2017

flyPanelsはウェブサイトやWebアプリケーション用のオフキャンバスメニュープラグイン。最新のブラウザをすべてサポート。

ブラウザサポート

Google Chrome (Windows, OSX, iOS and Android 4.x)
Internet Explorer 11+
Firefox 40+
Safari 7+
Mobile Safari iOS 8+

Setup

<!-- You'll need to include flyPanels of course! -->
<script src="jquery.flyPanels.js"></script>

<!-- Some basic CSS is required of course -->
<link rel="stylesheet" href="css/flyPanels.css">

HTMLベーシックセットアップ

<div class="flypanels-container preload">
  <div class="offcanvas flypanels-left">
    <div class="panelcontent" data-panel="default">
      <p>panel content goes here</p>
    </div>
  </div>
  <div class="flypanels-main">
    <div class="flypanels-topbar">
      <a class="flypanels-button-left icon-menu" data-panel="default" href="#"></a>
      <a class="flypanels-button-right icon-menu" data-panel="default" href="#"></a>
    </div>
    <div class="flypanels-content">
      Your page content goes here...
    </div>
  </div>
  <div class="offcanvas flypanels-right">
    <div class="panelcontent" data-panel="default">
      <p>panel content goes here</p>
    </div>
  </div>
</div>

MIT

Demo/Download