[代码样式]okayNav – jQuery响应式菜单/导航插件

简介

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

浏览器兼容

IE10+	Edge	Chrome	Firefox	Opera	Safari

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/style.css" rel="external nofollow" >
<link rel="stylesheet" href="https://www.dowebok.com/css/okayNav.min.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.okayNav.min.js"></script>

2、HTML

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

3、JavaScript

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

配置

属性

自定义方法

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’)

销毁菜单

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

百度网盘" name="okayNav – jQuery响应式菜单/导航插件" pass="" code=""]