jQuery的盒盖在左边的菜单栏将鼠标悬停在菜单在行动

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();
});