Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
170 lines (121 sloc) 4.38 KB

Offside.js

(Plugin with configurable options currently in development)

Description

Offside.js is a lightweight off-canvas menu achieved with CSS3 transitions and transforms. Great for a small projects.

Offside.js was originally created for use in personal projects, but the source code and minified files are being provided should anyone find it useful in their own. It comes with minimal styling so that you can have full control over your menu's look and feel. Example styles are included in a file called offside-demo.css so feel free to play around when them.

Demo

View the Demo Here

Features

  • Easy to install and setup.
  • Modern browser support.
  • Can click overlay to close menu.
  • Can press the escape key to close menu.
  • Support for both left and right menus.
  • Support for second level submenus.
  • Minimal styling for easy customization.
  • Demo styles included for minimal setup.

Installation

Required: jQuery

To use Offside.js, you will need the latest version of jQuery, version 3.3.1. You can download it here. You can alternatively use the CDN of your choosing.

Include the Necessary Files

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

To get started, you'll want to become familiar with the markup, seen below. Copy and paste the following into your body.

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

Offside.js comes with two default placement options, left or right.

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

Customization

You can customize Offside to fit your website or app by updating various classes. Some helpful classes that you can modify are listed below for your convenience.

Offside

If you want to change the default width of Offside, include the following in your stylesheet:

/* Width is set to 300px by default. */ 
.offside {
  width: 300px;
}

/* 
 * Be sure to update these values so that the menu remains hidden. 
 */
.offside-left {
  transform: translateX(-300px);
}

.offside-right {
  transform: translateX(300px);
}

The Menu

Classes for the menu, itself. Remember to use the direct descendent selector (>) if you only want to modify the top level of menu links.

/* The container for the menu. */
.offside-content {}

/* The menu <ul>. */
.offside-menu {}
.offside-menu > li {}
.offside-menu > li > a {}

The Submenu

If a submenu is added to a menu link, the menu link containing the submenu gains the has-submenu class. Additionally, a submenu class is applied to any submenus.

/* The menu link <li> that contains a submenu. */
.offside-menu .has-submenu {}

/* Submenu styles. */
.offside-menu .submenu {}
.offside-menu .submenu li {}
.offside-menu .submenu li a {}

Menu Toggler

Below is the class for the <button> that activates the menu.

.menu-toggler {}

In the Works

Going forward, there are a number of updates planned for this plugin. While there are no projected release dates for these updates at this time, below are some things that will be in the works:

  • NPM, Bower, Grunt, Webpack support.
  • The ability to customize Offside behavior through options.
  • A Vanilla Javascript alternative with no dependencies.

Version History

1.0 Initial Commit

License

Licensed Under MIT