Using Responsive Menus with CodeIgniter

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.

CodeIgniter Navigation

For my demo site, the navigation menu is displayed in the left sidebar. The design is a fairly typical menu structure:

<ul>
	<li class="heading orangeHeading">gpResponsiveMenu</li>
	<ul>
		<li><?php echo anchor("responsivemenu/select", "Select Mode");?></li>
		<li><?php echo anchor("responsivemenu/vertical", "Vertical Mode");?></li>
		<li><?php echo anchor("responsivemenu/vertical_overlay", "VerticalOverlay Mode");?></li>
		<li><?php echo anchor("responsivemenu/inline_overlay", "InlineOverlay Mode");?></li>
		<li><?php echo anchor("responsivemenu/page_overlay", "PageOverlay Mode");?></li>
		<li><?php echo anchor("responsivemenu/split_view", "SplitView Mode");?></li>
		<li><?php echo anchor("responsivemenu/secondary_nav", "Secondary Nav");?></li>
	</ul>
	<li class="heading purpleHeading">imBookFlip</li>
	<ul>
		<li><?php echo anchor("bookflip/manual", "AutoFlip:off");?></li>
		<li><?php echo anchor("bookflip/autoflip", "AutoFlip:click");?></li>
		<li><?php echo anchor("bookflip/pos_absolute", "Fixed Position");?></li>
		<li><?php echo anchor("bookflip/external", "External Control");?></li>
		<li><?php echo anchor("bookflip/gotopage", "Go To Page");?></li>
		<li><?php echo anchor("bookflip/flipdirection", "Flip Direction");?></li>
		<li><?php echo anchor("bookflip/ajax_load", "Ajax Load");?><span class="important">* New</span></li>
		<li><?php echo anchor("bookflip/ajax_iframe", "Ajax Load Iframe");?><span class="important">* New</span></li>
	</ul>
 
	<li class="heading">imAnimTabber</li>
	<ul>
		<li><?php echo anchor("animtabber/slide_option", "Slide Option");?></li>
		<li><?php echo anchor("animtabber/height_option", "Height Option");?></li>
		<li><?php echo anchor("animtabber/width_option", "Width Option");?></li>
		<li><?php echo anchor("animtabber/fade_option", "Fade Option");?></li>
		<li><?php echo anchor("animtabber/carousel_option", "Carousel Option");?></li>
	</ul>
…
 
</ul>

Responsive Menu

In order to use the navigation, I first had to add an id to the parent ul (Note: a class name can also be used).

<ul id=”nav”>
…
 
</ul>

I then loaded jquery and the gpResponsiveMenu plugin into my main template:

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery/gpresponsivemenu/jquery.gpResponsiveMenu-0.5.min.js"></script><script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery/jquery_site_responsive.js"></script>

The jquery_site_responsive.js file instantiates the responsive menu plugin:

?View Code JAVASCRIPT
$(document).ready(function(){
         $('#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',
		menu_structure: {"menu_tag": 'self', "menu_caption_tag": "LI", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'},
		media_query_modes: [{"max": "880", "mode": "Vertical"}]
	});
});

Plugin Options

nav_parent: The navigation menu will be loaded in the #primary div.

nav_toggle_parent: The toggle menu button will added to the #demo_top_bar div.

nav_toggle_icon_class: I’m using the icon that is supplied with the plugin. I’m using an icon instead of a text button.

nav_position: By default, the menu will be loaded as the last element in the parent’s container. I want menu to be the first element.

menu_structure: A standard menu structure is:

<ul>
	<li>
		<ul></ul>
	</li>
</ul>

My CodeIgniter menu structure is:

<ul>
	<li></li>
	<ul></ul>
</ul>

Use the menu_structure option to tell the gpResponsiveMenu plugin how the menu is structured (Note: this is only necessary when the menu is not standard).

The options for the menu_structure are:

menu_tag: This is the parent tag that is used to contain each set of menus. For instance, WordPress menu widgets use an aside tag for each group of menus:

<div id=”secondary”>
     <aside id="widgets-reloaded-archives-2" class="widget archives" style="display: block;">
	<h3 class="widget-title">Archives</h3>
	<ul class="xoxo archives">
		<li>December</li>
		<li>November</li>
		...
	</ul>
     </aside>
     <aside id="widgets-reloaded-categories-2" class="widget categories">
     <aside id="widgets-reloaded-categories-3" class="widget categories">
...
</div>

In the example above, the value for the menu_tag option would be aside.

In the original CodeIgniter navigation menu displayed above, main ul tag (id=”nav”) is the parent for the menu items. When this is the case, the value for the menu_tag option should be set to self.

menu_caption_tag: This is the HTML tag that is used as caption for the menu group. In a standard menu structure, the LI tag is used as the caption.

<ul>
	<li>Caption
		<ul>
			<li>child</li>
			<li>child</li>
		</ul>
	<li>
</ul>

In the WordPress menu, the H3 tag is used as the menu caption:

<aside>
	<h3>Caption</h3>
	<ul>
		<li>child</li>
		<li>child</li>
		...
	</ul>
</aside>

My CodeIgniter menu structure also uses the LI tag for the caption:

<ul>
	<li>Caption</li>
	<ul>
		<li>child</li>
		<li>child</li>
		...
	</ul>
</ul>

menu_item_parent_tag: This is the parent for the child menu items. For my menu, this will be the UL tag, but it could be an OL, DL, or DIV tag:

<ul>
	<li>Caption</li>
	<ul> <!-- this is the parent -->
		<li>child</li>
		<li>child</li>
		...
	</ul>
</ul>

menu_item_tag: This is the tag of the child menu items. Most of the time, this will be an LI tag.

So, the menu_structure option for my CodeIgniter menu is:

?View Code JAVASCRIPT
menu_structure: {"menu_tag": 'self', "menu_caption_tag": "LI", "menu_item_parent_tag": "UL", "menu_item_tag": 'LI'}

Media Queries

The most important option for the gpResponsiveMenu plugin is media_query_modes. Many of the other responsive menu plugins has a single display for an alternate menu structure. My plugin has 6 options that can be set based upon a media query mode. On my demo site, I display a vertical menu when the screen size is less than 880 pixels.

?View Code JAVASCRIPT
media_query_modes: [{"max": "880", "mode": "Vertical"}]

But I could set it up so that a vertical menu displays when the screen size is between 460px and 880px, and then display a select menu when the screen size is less than 460px:

?View Code JAVASCRIPT
media_query_modes: [ {"min": "460", "max": "880", "mode": "Vertical"}, {"max": "459", "mode": "Select"}]

The media_query_modes option is the key to creating a responsive menu. If the screen size is not in the range of the modes, your normal screen will display. And if you screen size changes to one of the modes (like when changing your Ipad from Landscape to Portrait), the plugin will respond accordingly.

That’s it. Creating a responsive menu using CodeIgniter is quite easy. For more information about the gpResponsiveMenu plugin, see my original post. The plugin and can be downloaded from GitHub. You can also see demos of the plugin on my demo section.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks