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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!