Responsive Navigation with Drop Down Menu and Wordpress Plugin
Why isn't it free!?Well, I spent a good week of my life writing, finessing and commenting this code from scratch so it would be as rock-solid and easy-to-use as it can be. I also have a family to feed.
First make sure your navigation is a properly formatted unordered list and is inside of a <nav> tag. Then add these scripts in the page header:
Substitute the paths below for the path to your installation.
Add this script at the bottom of the page just before the closing </body> tag:
Wordpress Plugin Installation Instructions
- Download and install the entire contents of the "responsive-navigation" folder into /wp-content/plugins.
- In the administrative control panel go to Plugins (/wp-admin/plugins.php) and activate "Responsive Navigation".
After spending countless hours searching the web reviewing reliable responsive navigation menu scripts that:
- Can handle multiple levels with dropdown and accordian style navigation
- Is responsive for mobile
- Has a toggle for accessing sub menus in mobile
- Works with all major browsers including Internet Explorer 8+, Firefox, Safari, Chrome and Android
I finally decided to write one myself. Now that I've done all the hard work writing this script and making sure this is a fully platform tested responsive navigation system, I'm offering it to you for download.
The biggest problem I ran into with just about all of the free scripts is that they couldn't handle more than a single level of the menu tree -or they didn't have a way to toggle a submenu open, then toggle it closed if the user doesn't find what they're looking for. This script handles those challenges beautifully.
This script was developed to be the best Responsive Navigation of any I reviewed. Here are some of the features:
- HTML5 and CSS that are fully platform tested
- Toggle arrow for mobile allows users to access the parent page, as well as it's children
- An excellent navigation solution for large sites with many sub levels
- Drop down menus for desktop, accordian menu for mobile
- Main section pages are still accessible (other scripts require the main sections be used as a toggle thus disabling their ability to link to a page, this script adds an arrow to allow both the toggle as well as the link functionality
- Infinitely Expandable subnavigation menus
- Super-fast loading, minimal graphics
- Easy to style and customize
- Easy to install
- Simple, clean design
- Simple, clean code
- Fully commented
Now available as a Wordpress Plugin!
This plugin is only compatible with the 2012 & 2014 themes at the present. Using this plugin can really clean up your mobile navigation as well as add some nice subtle animation to your main menu. This plugin can be used in conjunction with a custom theme as well however you'll need to write your own CSS for the main web view and uncomment line 12 of the ResponsiveNav.js file so it will write in the menu button for mobile view.
The Wordpress Plugin turns this mess:
Into this user-friendly menu system:
- Internet Explorer 8+