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