jQuery鼠标点击全屏遮罩菜单效果

使用方法：

引入CSS样式文件

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/style4.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

引入相关JS文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/mousetrap.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/cmdscriptmin.js"></script>

HTML结构

<!-- Container -->
<div class="container">
    <!-- section with buttons-->		
    <section>
        <p><button id="trigger-overlay" type="button">鼠标点击或者按键盘M查看效果</button></p>
    </section>
    <!-- section with buttons end-->	
    
</div>
<!-- Container end -->
<div class="overlay overlay-slidedown">
    <button type="button" class="overlay-close">Close</button>
    
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">What we do?</a></li>
            <li><a href="#">Our clients</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
    </nav>
    <div class="your_blocks">
        <div class="your_block">
            <a href="#"><img src="img/intro.jpg" class="block_attachment" alt="">
            <span>Here you can add your awesome information, ADS or recent/popular news from your site.</span>	                                               			</a>
        </div>
    </div>
</div>