当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/07/25 来源:互联网 浏览: 关键词:jquery 菜单导航 全屏 
jQuery简单实用的隐藏全屏导航菜单插件 jQuery简单实用的隐藏全屏导航菜单插件
阿里云

简要教程

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

安装

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

bower install jquery-fatNav 

使用方法

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

<linkrel="stylesheet"href="css/fatNav.css">
<scriptsrc="js/fatNav.js"async></script> 

HTML结构

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

<divclass="fat-nav">
    <divclass="fat-nav__wrapper">
        <ul>
            <li><ahref="#">Menu item</a></li>
            <li><ahref="#">Menu item</a></li>
            <li><ahref="#">Menu item</a></li>
            <li><ahref="#">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属性来修改它们的颜色。

共有人阅读,期待你的评论!评论
Top