Submit your widget
HomeMenu & NavigationJQuery Box Lid Menu in action by hovering your mouse over the menu bar on the left

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

Created 10 years ago   Views 17325   downloads 3760    Author box-lid
JQuery Box Lid Menu in action by hovering your mouse over the menu bar on the left
View DemoDownload
35
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(); 
});

 

You might also like