jQuery plugin for Box Lid Menu
CSS JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
example
images
js
sass
.gitignore
.ruby-version
Gemfile
Gemfile.lock
LICENSE
README.md
Rakefile
box-lid.jquery.json
config.rb

README.md

Box Lid Menu

This jQuery plugin creates the box lid effect for navigation menus, and is inspired by Toybox. Prettier documentation, with a built-in demo, is available here.

Installation

First, include the main stylesheet and javascript as follows:

<link rel='stylesheet' type='text/css' href='css/box-lid.css'>
<script src='js/jquery.box-lid.min.js'></script>

Next, create the following HTML structure:

  <div class='box-lid-menu'>
    <div class='box-lid-icon'></div>
    <nav>
      <!-- NAVIGATION CONTENTS -->
    </nav>
  </div>
  <div class='box-lid'>
    <div class='box-lid-content'>
      <!-- MAIN CONTENT -->
    </div>
  </div>

Finally, invoke $('.box-lid-menu').boxLid() where appropriate. The most common usage should be

$(function() {
  $('.box-lid-menu').boxLid();
});

You are highly encouraged to style your own navigation menu within the nav element. The demo and the docs currently use sass/box-lid-nav.scss.

Configuration

There are two ways to configure the menu.

SCSS

If you use SCSS, simply override the configuration variables before importing sass/box-lid.scss. For example,

$box-lid-background: #ccc;
@import 'box-lid';

Refer to the beginning of sass/box-lid.scss for the complete list of configuration variables.

CSS

If the above method is not your cup of tea, you can also choose to override the CSS. Unfortunately this method is terribly brittle.