jquery 三级菜单插件_使用此jQuery插件创建更智能的响应式导航菜单

每个现代站点都需要响应式布局和可用的导航 。 那是给定的。

但是，汉堡菜单只能走这么远，它们会从根本上改变各种屏幕尺寸的可用性 。 解决此问题的更好方法是逐渐隐藏带有OkayNav之类的插件的链接 。

这个免费的jQuery插件在任何页面上都添加了非常简单的菜单功能 ，并且根据不同的视口几乎隐藏了导航项 。 这样，智能手机用户可以使用单个汉堡包菜单，而平板电脑用户也可以看到一些链接。

默认情况下，它依赖于<nav>元素和冗长的无序列表 。 到目前为止，我认为该插件不支持多级下拉菜单，但是如果您了解一些jQuery，则可以自己添加。

OkayNav非常简单， 适用于只有少数导航链接的简单网站 。 这些链接一旦碰到某个视口，就会慢慢隐藏在屏幕外菜单的后面，并且更多的链接会隐藏在浏览器越小的屏幕上 。

您需要将无序列表包装在导航元素中，并为其指定特定的ID。 然后，您可以使用okayNav()函数定位整个导航 ，如下所示：

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

请注意，这只是最简单的设置，没有任何自定义功能。 您可以使用该库中内置的十几个自定义选项来控制图标样式，菜单动画，滑动支持和回调函数。

而且，您甚至可以通过将特定值传递给函数来调用菜单以随意打开/关闭 。 这是一个打开导航的简单示例：

navigation.okayNav('openInvisibleNav');

所有这些代码在GitHub存储库中都有很好的记录，其中还包括脚本的下载。 如果您喜欢CDN路由，还可以使用RawGit链接直接从GitHub添加此脚本。

OkayNav 非常适合采用渐进式导航技术的小型站点 。 但是，如果您仍然不确定该如何工作，请在CodePen上查看此演示 ，以演示此小插件可以做什么。

翻译自: https://www.hongkiat.com/blog/progressively-responsive-navigation-okaynav/