jQuery Plugin to Create Smarter Responsive Navigation Menu
Every modern site needs a responsive layout and a usable navigation. That’s a given.
But, hamburger menus can only go so far and they radically change usability for varying screen sizes. The better way to handle this is by progressively hiding links with a plugin such as OkayNav.
This free jQuery plugin adds a very simple menu feature to any page and it slowly hides navigation items, based on different viewports. This way smartphone users have the single hamburger menu but tablet users can see a few links, too.
Read Also: How to Create a Responsive Navigation
By default, it relies on a <nav> element and a lengthy unordered list. So far, I don’t think this plugin supports multi-level dropdowns but if you know a bit of jQuery you could add this yourself.
OkayNav is extremely simple and it’s meant for simpler websites that only have a handful of navigation links. These links slowly hide behind an off-screen menu once they hit a certain viewport and more links keep hiding the smaller the browser gets.
You’ll need to wrap your unordered list in a navigation element and give it a specific ID. Then, you can target the whole nav with the okayNav() function like this:
var navigation = $('#nav-main').okayNav();
Note this is just the simplest setup without any custom features. You can work with over a dozen custom options built into this library to control the icon style, the menu animation, swipe support, and callback functions.
And, you can even call the menu to open/close at will by passing specific values to the function. Here’s a simple example to open the navigation:
navigation.okayNav('openInvisibleNav');
All of these codes are well documented in the GitHub repo which also includes a download of the script. If you prefer the CDN route you could also use the RawGit link to add this script directly from GitHub.
OkayNav is great for smaller sites that benefit from the progressive navigation technique. But, if you’re still unsure of how this works check out this demo on CodePen showing what this little plugin can do.