A Responsive Menu jQuery Plugin

Secondary Navigation

Using the secondary_nav option, the gpResponsiveMenu plugin can also control secondary navigation. The secondary_nav option uses the same option names as the primary navigation. The menu_container option tells the plugin which element is the secondary navigation container. This can be either a class or id.

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '#primary',
	nav_toggle_parent: '#demo_top_bar',
	nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-y',
	nav_position: 'first',
	media_query_modes: [ {"max": "768", "mode": "Vertical"}],
	secondary_nav: { 
                menu_container: '#gs-top-nav', 
                nav_parent: '#gs-widget-tabs-cntnr', 
                menu_select_text: 'Plugins/Widgets', 
                media_query_modes: [ {"max": "460", "mode": "Select"}]
        }
});

In the example above, the primary navigation is using Vertical mode, while the secondary navigation is using Select mode. As with the primary navigation, you can use multiple modes with the secondary navigation.

?View Code JAVASCRIPT
$('#nav').gpResponsiveMenu({
	nav_parent: '#primary',
	nav_toggle_parent: '#demo_top_bar',
	nav_toggle_icon_class: 'gp-responsive-menu-icon gp-responsive-icon-y',
	nav_position: 'first',
	media_query_modes: [ {"max": "768", "mode": "Vertical"}],
	secondary_nav: { 
                menu_container: '#gs-top-nav', 
                nav_parent: '#gs-widget-tabs-cntnr', 
                menu_select_text: 'Plugins/Widgets', 
                media_query_modes: [ {“min”:459", max": "1110", "mode": "VerticalOverlay"}, {"max": "459", "mode": "Select"} ]
        }
});

Note: The secondary navigation does not inherit any of the primary navigation options, so you must explicitly set each option (and style accordingly).

WordPress Menu Structure

Many website menus are structured using ul/li/ul. But I found that the WordPress widgets structure the menus differently. So I added an option to the gpResponsiveMenu plugin that allows for different structures (Note: I have only tested this with the WordPress widget menu structure).

?View Code JAVASCRIPT
$('#secondary').gpResponsiveMenu({
        ...
	menu_structure: {"menu_tag": 'aside', "menu_caption_tag": "H3", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'},
	...
});

If the menu_structure option has a value, the plugin will use this to build the new menu.

menu_tag: This is the container for each menu. WordPress widgets use an ‘aside’ tag for each set of menus. This value can also be set to self.

?View Code JAVASCRIPT
$('#secondary').gpResponsiveMenu({
        ...
	menu_structure: {"menu_tag": 'self', "menu_caption_tag": "H3", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'},
	...
});

When set to self, the plugin will look for all children under itself.

menu_caption_tag: This is optional, but WordPress uses an H3 tag for the caption of each set of menus.
menu_item_parent_tag: This is the beginning of the actual menu. In the case of WordPress, it is a UL tag, but it could be an OL, DIV, DL, etc.
menu_item_tag: The menu items tag.

Well, that’s it. Using jQuery and the gpResponsiveMenu plugin will enable you to have the most responsive menu. You can find demos on each mode on my demo section. The plugin can be downloaded from jQuery plugins or GitHub. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks