okayNav-jQuery响应式导航菜单插件

okayNav是一款非常有创意的jQuery响应式导航菜单插件。该响应式导航菜单在浏览器尺寸变小时，将超出视口的菜单项实时收缩到一个侧边栏菜单中。适用于制作桌面和移动手机的导航菜单。

使用方法

使用该响应式文字插件需要在页面中引入okayNav.css、jquery和jquery.okayNav.min.js文件。

       
<link rel="stylesheet" href="css/okayNav.css" media="screen">
<script src="path/to/jquery.js"></script> 
<script src="path/to/jquery.okayNav.min.js"></script>
                

HMTL结构

okayNav响应式导航菜单的基本HTML结构如下：

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

    <nav role="navigation" id="nav-main" class="okayNav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contacts</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Testimonials</a></li>
        </ul>
    </nav>
</header><!-- /header -->         
                

初始化插件

在页面DOM元素加载完毕之后，可以通过okayNav()方法来初始化该响应式导航菜单插件。

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

配置参数

okayNav的默认配置参数如下：

var navigation = $('#nav-main').okayNav({
    parent : '', // will call nav's parent() by default
    toggle_icon_class : 'okayNav__menu-toggle',
    toggle_icon_content: '<span /><span /><span />',
    align_right: true, // If false, the menu and the kebab icon will be on the left
    swipe_enabled: true, // If true, you'll be able to swipe left/right to open the navigation
    threshold: 50, // Nav will auto open/close if swiped >= this many percent
    beforeOpen : function() {}, // Will trigger before the nav gets opened
    afterOpen : function() {}, // Will trigger after the nav gets opened
    beforeClose : function() {}, // Will trigger before the nav gets closed
    afterClose : function() {}, // Will trigger after the nav gets closed
    itemHidden: function() {}, // Will trigger after an item moves to the hidden navigation
    itemDisplayed: function() {} // Will trigger after an item moves to the visible navigation
});                 
                

• parent：导航菜单的父元素。
• toggle_icon_class：侧边栏菜单切换按钮的class类。
• toggle_icon_content：切换按钮的HTML标签。
• align_right：切换按钮是否右对齐。
• swipe_enabled：是否支持左右滑动来打开导航菜单。
• threshold：如果滑动的阈值小于这个值，侧边栏菜单将自动打开或关闭。
• beforeOpen：回调函数，在侧边栏菜单打开前触发。
• afterOpen：回调函数，在侧边栏菜单打开后触发。
• beforeClose：回调函数，在侧边栏菜单关闭前触发。
• afterClose：回调函数，在侧边栏菜单关闭后触发。
• itemHidden：回调函数，一个菜单项移动到侧边栏菜单时触发。
• itemDisplayed：回调函数，一个菜单项从侧边栏菜单移动到菜单时触发。

方法

• navigation.okayNav('openInvisibleNav');：打开侧边栏菜单。
• navigation.okayNav('closeInvisibleNav');：关闭侧边栏菜单。
• navigation.okayNav('toggleInvisibleNav');：切换侧边栏菜单。
• navigation.okayNav('recalcNav');：重新计算菜单项是显示还是隐藏。
• navigation.okayNav('getParent');：获取菜单的父元素。
• navigation.okayNav('getVisibleNav');：获取可见的导航菜单。
• navigation.okayNav('getInvisibleNav');：获取隐藏的导航菜单。
• navigation.okayNav('getNavToggleIcon');：获取切换按钮图标。
• navigation.okayNav('getChildrenWidth');：获取导航菜单子元素的总宽度。
• navigation.okayNav('destroy');：销毁插件。

okayNav响应式导航插件的github地址为：https://github.com/VPenkov/okayNav