Box Lid Box Lid Menu

Box Lid Menu inspired by Toybox.

View the Project on GitHub jimjh/box-lid

Built by .

Overview

This jQuery plugin creates the box lid effect for navigation menus, and is inspired by Toybox. You can see it in action by hovering your mouse over the menu bar on the left.

A bare bones example is also available on github. Finally, a simple introduction can be found on my blog.

Featured By

Installation

First, include the 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();
});

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.