Before you spend countless hours working on a responsive menu, just stop and wonder how many people will actually use the thing!
See my own tests and analytics at the end of the article. Be wary: Users are engaging less and less with navigation items.
So we’re stuck with the header navigation…
1. PriorityNav.js
This is a great solution. Doesn’t hide everything under a button, but displays what it can depending on viewport size. Sometimes called Priority+ Navigation.
Very small JS (5kb), no dependencies on jQuery.
2. OkayNav
Another Priority+ solution. Items disappear on a smaller viewport but still accessible under the dot menu.
Also vanilla Javascript (no jQuery dependency). There is a jQuery version that seems to have some extra features (swipable).
3. FlexMenu
Priority+ – this one requires jQuery but has a bunch of options.
4. Priority Navigation
You can assign priority for each menu item. Lower priority disappears first.
This one is dependent on jQuery.
4. The Leanest Possible Responsive Menu
Check out this article by Dan. It’s the easiest way to create a simple responsive menu.
There’s about 6 lines of JavaScript and not a lot of CSS.
5. SlickNav
SlickNav is the traditional responsive menu that puts items into a dropdown ‘drawer’. It is one of the more robust solutions that handles multi-level dropdowns and has solid browser support.
It requires jQuery.
6. WordPress Responsive Menu
Arguably the most popular drop-in nav solution for WordPress. Has a multitude of options, but is basically a slide-in off-canvas type menu.
Over 90k downloads and 5 star ratings.
7. Mega Dropdown
This powerful solution is for highly complex menus that might include images, icons, multiple levels. In desktop – all items are hidden inside the dropdown, but will expand out using the viewport.
In mobile, items are altered to fill the mobile viewport.
This clever animation is from the CodyHouse site. The menu needs jQuery.
8. Responsive Overlay
This pattern has appeared over the last few years. The entire viewport is replaced with a scrollable menu. Both desktop and mobile have the same action.
Relies on jQuery. If you want to add some nice animated transitions, take a look at this example.
9. CSS Only Slide Down Menu
Part of a tutorial on Smashing Magazine, this solution makes use the of the CSS :target selector to toggle a menu. No JavaScript in sight.
Note that the actions are the same for mobile and desktop.
10. Full Screen Overlay Menu
A nice tutorial and demo for another overlay menu solution. Again, these solutions present the same menu actions for desktop and mobile.
The demo depends on jQuery – but that’s really not necessary as you can easily replace the toggleClass function with some vanilla JS. Of course if you are already using jQuery that’s not an issue.
11. Hamburger Animations
This isn’t a responsive menu as such, but if you’re using the hamburger icon, take a look at these awesome toggle animations.
So, What Should You Use?
I’ve come to believe that the more you hide elements away – the less they will be used, which is why I’m starting to favour Priority+ type menus (see other alternatives to the hamburger).
Looking at my analytics for one site (with this type of menu) shows the visible items are clicked much more than dropdown menus are.
However priority menus are only good if you have a handful of high level menu items. If you have a more interactive site, you could go for off-canvas multi-level menus.
Take note: Users Are Ignoring Off-Canvas Navigation
Responsive design continues to evolve from my original roundup of responsive menus. Much has changed since I first debated the 3-line hamburger menu. My original AB Tests showed that the word “MENU” was tapped significantly more than the so-called hamburger icon.
Over a year later I repeated the test and discovered that the hamburger icon had caught up. The test showed something far more disturbing:
Mobile users are interacting with navigation elements a whole lot less than they used to be.
It has now been two years since that AB test and I would suggest that interaction has dropped even further. Without getting pedantic about the numbers, a quick glance at these graphs will show it.
This is mobile sessions on my site since 2014. 2016 was a good year:
This is the number of clicks or taps on the mobile menu button. They are recorded as a Google Analytics event:
Doesn’t take a genius to see that users aren’t tapping menu buttons much anymore.
The post 10+ Responsive Menus and Navigation Solutions appeared first on Sites for Profit.