okayNav – jQuery响应式菜单/导航插件
分类:代码 日期: 点击(47,928) 下载(1) 来源:未知
简介
okayNav 是一款小巧的 jQuery 响应式菜单/导航插件,它能够自动计算浏览器窗口的宽度,当窗口宽度变小到无法容纳菜单时,它就会把“多余”的菜单变成“三个点”的图标,点击图标就能展开多余的菜单;当窗口变大时,多余的菜单又会重新显示。
浏览器兼容
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
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’)
- 销毁菜单
GitHub 地址:https://github.com/VPenkov/okayNav
标签:jQuery插件
相关文章
-
Smoothslides – 可平移的jQuery幻灯片插件
-
jQuery.slidizle – jQuery幻灯片插件
-
jQuery旋转插件jqueryrotate
-
jQuery幻灯片插件Sudo Slider
-
BoxSlider – jQuery内容滚动/滑动插件
-
jQuery时间轴/时光轴插件jqtimeline
-
hotopile JS – jQuery照片堆叠效果插件
-
Viewer.js – 强大的JS/jQuery图片查看器
-
jQuery图片文字无间断滚动插件YLMarquee
-
ResponsiveSlides.js – jQuery幻灯片插件
-
scrollocue – jQuery自动提词器插件
-
skippr – 更轻更快的jQuery幻灯片插件
-
One-Page-Nav – jQuery导航插件
-
AutoScroll.js – jQuery页面自动滚动插件
-
jQuery自适应宽度导航插件HorizontalNav