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 11 years ago   Views 17786   downloads 3919    Author box-lid
JQuery Box Lid Menu in action by hovering your mouse over the menu bar on the left
View DemoDownload
37
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