In a previous post, I discussed the Responsive Menu jQuery Plugin. Since it’s creation, I have integrated the plugin with CodeIgniter and Drupal. I also used this plugin on DevoutGeek.com. When I first integrated the Responsive Menu plugin with Devout Geek, I only added it to the menu template file. I recently took the time to create a Magento extension. The video below displays how to set up (and use) the extension. The Responsive Menu extension for Magento can be downloaded from DevoutGeek.com or Magento Connect.
In a previous post (A jQuery Responsive Menu Plugin), I discussed how to use the gpResponsiveMenu jQuery plugin to create responsive menus. While developing the plugin, I tested the options with CodeIgniter (I use CodeIgniter for my demo site). I had to make minor changes to the CodeIgniter navigation in order to use the plugin.
While doing the final testing of DevoutGeek.com, I found that I did not like the way the main menu displayed on smaller devices (Ipads, phones, etc). I took a good bit of time implementing a responsive design on DevoutGeek.com, but the main menu did not flow to my liking. So I decided to create a jQuery plugin. I have seen other responsive menu plugins, but most implement a single strategy (i.e, change the menu into a drop-down select). The plugin that I created, gpResponsiveMenu, has 6 options that are implemented based upon media queries. The plugin can be used with both primary and secondary navigation (simultaneously).