Submit your widget

JQuery Box Lid Menu in action by hovering your mouse over the menu bar on the left

Created 3 years ago   Views 41857   downloads 7542    Author box-lid
JQuery Box Lid Menu in action by hovering your mouse over the menu bar on the left
View DemoDownload
104
Share |

You can see the Box Lid Menu in action by hovering your mouse over the menu bar on the left.

Installation

First, include the stylesheet and javascript as follows:

<link rel='stylesheet' type='text/css' href='css/box-lid.css'> <script src='js/box-lid.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(); 
});