jQuery

【jQuery】トランジションとトランスフォームによって実装された軽量のオフキャンバスメニューOffside

October 12, 2018
Offside.js

Offside.jssは、CSS3のトランジションとトランスフォームによって実装された軽量のオフキャンバスメニューです。

Installation

<!-- Include Offside.min.css -->
<link rel="stylesheet" href="your/path/offside.min.css">

<!-- Optionally include demo styles for a headstart -->
<link rel="stylesheet" href="your/path/offside-demo.min.css">

<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Include Offside.js-->
<script src="your/path/offside.js"></script>

Usage

<!-- Site Overlay -->
<div class="offside-overlay"></div>

<!-- Offside Menu -->
<nav class="offside offside-left">
  <div class="offside-content">
    <ul class="offside-menu">
      <li><a href="#">A link</a></li>
      <li><a href="#">Some link</a></li>
      <li><a href="#">Another link</a></li>
    </ul>
  </div>
</nav>

Placement

<!-- Positioned on the left. -->
<div class="offside offside-left">
  <div class="offside-content">
    <ul class="offside-menu">
      <li><a href="#">A link</a></li>
      <li><a href="#">Some link</a></li>
    </ul>
  </div>
</div>

<!-- Positioned on the right. -->
<div class="offside offside-right">
  <div class="offside-content">
    <ul class="offside-menu">
      <li><a href="#">A link</a></li>
      <li><a href="#">Some link</a></li>
    </ul>
  </div>
</div>

MIT