{"id":37643,"date":"2017-08-11T21:01:52","date_gmt":"2017-08-11T13:01:52","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37643"},"modified":"2023-04-06T19:11:52","modified_gmt":"2023-04-06T11:11:52","slug":"progressively-responsive-navigation-okaynav","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/progressively-responsive-navigation-okaynav\/","title":{"rendered":"jQuery Plugin to Create Smarter Responsive Navigation Menu"},"content":{"rendered":"

Every modern site needs a responsive layout<\/a><\/strong> and a usable navigation<\/a><\/strong>. That\u2019s a given.<\/p>\n

But, hamburger menus can only go so far and they radically change usability<\/strong> for varying screen sizes. The better way to handle this is by progressively hiding links<\/strong> with a plugin such as OkayNav<\/a><\/strong>.<\/p>\n

This free jQuery plugin adds a very simple menu feature<\/strong> to any page and it slowly hides navigation items<\/strong>, based on different viewports. This way smartphone users have the single hamburger menu but tablet users can see a few links, too.<\/p>\n

Read Also:<\/strong> How to Create a Responsive Navigation<\/a><\/p>\n

\"OkayNav<\/a><\/figure>\n

By default, it relies on a <nav><\/code> element<\/strong> and a lengthy unordered list<\/strong>. So far, I don\u2019t think this plugin supports multi-level dropdowns but if you know a bit of jQuery you could add this yourself.<\/p>\n

OkayNav is extremely simple and it\u2019s meant for simpler websites<\/strong> that only have a handful of navigation links. These links slowly hide behind an off-screen menu<\/strong> once they hit a certain viewport and more links keep hiding<\/strong> the smaller the browser gets.<\/p>\n

You\u2019ll need to wrap your unordered list<\/strong> in a navigation element and give it a specific ID. Then, you can target the whole nav<\/strong> with the okayNav()<\/code> function like this:<\/p>\n

\r\nvar navigation = $('#nav-main').okayNav();\r\n<\/pre>\n
Note this is just the simplest setup<\/strong> without any custom features. You can work with over a dozen custom options<\/strong> built into this library to control the icon style, the menu animation, swipe support, and callback functions.<\/p>\n
And, you can even call the menu to open\/close at will<\/strong> by passing specific values to the function. Here\u2019s a simple example to open the navigation<\/strong>:<\/p>\n
\r\nnavigation.okayNav('openInvisibleNav');\r\n<\/pre>\n
All of these codes are well documented in the GitHub repo<\/a><\/strong> which also includes a download of the script. If you prefer the CDN route you could also use the RawGit link<\/a><\/strong> to add this script directly from GitHub.<\/p>\n
OkayNav is great for smaller sites<\/strong> that benefit from the progressive navigation technique. But, if you\u2019re still unsure of how this works check out this demo<\/a> on CodePen showing what this little plugin can do.<\/p>\n