jQuery简单实用的隐藏全屏导航菜单插件

fatNav是一款简单实用的jQuery全屏导航菜单插件。该导航菜单是一个隐藏菜单，用户通过点击汉堡包导航按钮可以打开一个全屏的导航菜单。该导航菜单的特点是简单易用，时尚大方。

安装

可以使用bower来安装该导航菜单插件。

bower install jquery-fatNav     
    

使用方法

使用该导航菜单插件首先要引入fatNav.css和fatNav.js文件。

<link rel="stylesheet" href="css/fatNav.css">
<script src="js/fatNav.js" async></script>     
    

HTML结构

该导航菜单插件的html结构使用标准的无序列表结构，在无序列表的外面使用<div>作为包裹容器。

<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
            <li><a href="#">Menu item</a></li>
        </ul>
    </div>
</div>    
    

调用插件

在页面加载完毕后可以通过下面的方法来初始化该lightbox插件。

$.fatNav();     
    

定制汉堡包图标的颜色

默认的导航汉堡包图标的配置如下：

.hamburger .hamburger__icon, 
.hamburger .hamburger__icon:before, 
.hamburger .hamburger__icon:after {
    background-color: red;
}     
    

默认的关闭按钮的配置如下：

.hamburger.active .hamburger__icon:before, 
.hamburger.active .hamburger__icon:after {
    background-color: green;
}     
    

你可以通过修改background-color属性来修改它们的颜色。