Easy jQuery 3D Side Menu Plugin with CSS3 - Box Lid

Box Lid is an easy-to-use jQuery plugin that enables you to create a side navigation menu with 3D 'Box Lid' effects by using CSS3 transitions and transforms. 

See also:

• Three-Dimensional and Space Efficient Menu - Meny

Basic Usage:

1. Create the html for the navigation menu

<div class='box-lid-menu'>
<div class='box-lid-icon'></div>
<nav>
<h4>Menus</h4>
<ul>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>
</div>

2. Create the html for the Box Lid content

<div class='box-lid'>
<div class='box-lid-content'>
...
</div>
</div>

3. Include jQuery library and jQuery Box Lid plugin files on the web page

<link rel='stylesheet' type='text/css' href='css/box-lid.css'>
<link rel='stylesheet' type='text/css' href='css/box-lid-nav.css'>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='js/jquery.box-lid.js'></script>

4. Call the plugin

<script>
$('.box-lid-menu').boxLid();
</script>

Change log:

v0.1.3 (2013-07-29)

• fix bugs

---

This awesome jQuery plugin is developed by jimjh. For more Advanced Usages, please check the demo page or visit the official website.