dowebok

注册

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

分类：代码 日期： 点击(43,186) 评论(1)

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

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

简介

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

浏览器兼容

IE Edge Chrome Firefox Opera Safari
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

标签：

相关文章