okayNav – jQuery响应式菜单/导航插件

分类：代码 日期：2016-02-22 点击(45,368) 下载(1) 来源：未知 收藏

演 示 演示2(回调函数) 下 载

简介

okayNav 是一款小巧的 jQuery 响应式菜单/导航插件，它能够自动计算浏览器窗口的宽度，当窗口宽度变小到无法容纳菜单时，它就会把“多余”的菜单变成“三个点”的图标，点击图标就能展开多余的菜单；当窗口变大时，多余的菜单又会重新显示。

浏览器兼容

IE10+	Edge	Chrome	Firefox	Opera	Safari

使用方法

1、引入文件

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/okayNav.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.okayNav.min.js"></script>

2、HTML

<header id="header">
    <a class="site-logo" href="#">dowebok</a>

    <nav role="navigation" id="nav-main" class="okayNav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">代码</a></li>
            <li><a href="#">素材</a></li>
            <li><a href="#">模板</a></li>
            <li><a href="#">教程</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
</header>

3、JavaScript

var navigation = $('#nav-main').okayNav();

配置

属性

名称	类型	默认值	说明
parent	字符串	空	指定导航条（nav）的父元素
toggle_icon_class	字符串	okayNav__menu-toggle	指定隐藏图标的 class
toggle_icon_content	字符串	<span /><span /><span />	指定隐藏图标元素的内容
beforeopen	函数	null	隐藏菜单展开前的回调函数
open	函数	null	隐藏菜单展开后的回调函数
beforeclose	函数	null	隐藏菜单关闭前的回调函数
close	函数	null	隐藏菜单关闭后的回调函数

自定义方法

navigation.okayNav(‘getParent’)

返回菜单的父元素

navigation.okayNav(‘getVisibleNav’)

返回整个菜单的 html

navigation.okayNav(‘getInvisibleNav’)

返回隐藏菜单的 html

navigation.okayNav(‘getNavToggleIcon’)

返回隐藏图标的 html

navigation.okayNav(‘openInvisibleNav’)

展开菜单

navigation.okayNav(‘closeInvisibleNav’)

关闭菜单

navigation.okayNav(‘toggleInvisibleNav’)

展开/关闭菜单

navigation.okayNav(‘recalcNav’);

重新调整菜单

navigation.okayNav(‘destroy’)

销毁菜单

演 示 演示2(回调函数) 下 载

GitHub 地址：https://github.com/VPenkov/okayNav

演 示 下 载

标签：jQuery插件