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
属性来修改它们的颜色。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!