How to create a responsive mobile menu for Omega subtheme

Its been over a year now since I started using responsive web design exclusively on all new websites and Omega Framework has been my base  theme of choice. Its truly awesome but Omega, like most popular Drupal base themes doesn't come with drop down or responsive menu out of the box. Some may view this as a shortfall but, I prefer to start with as little base code as possible.
In this tutorial I will explain how you can easily create a hard coded responsive drop down menu for Omega subthemes that will turn into a toggle menu on small screens, similar to that one on Facebook mobile. You can see this menu in action if you check out our own main menu above. For menu demo on mobile devices click here . If you like what you're seeing then here is what you'll need.

Requirements:

1. Omega theme framework. In this tutorial we assume you already have your Omega Subtheme created. If you do not then please use one of the following methods to create your Omega subtheme. Drush command:  drush omega-subtheme mysubthemename  recommended only for advanced users. Much simpler and more beginner friendly way to create an Omega Subtheme is to use Omega Tools module.

2. Some menu and submenu items are required in your site's main menu to test the integration. Please ensure that parent items with children (submenu items) in your main menu have the option "Show as expanded" checked.

Integration:

Step 1. Open the /sites/all/themes/mysubthemename/template.php file and add the following:

// menus customization
function mysubthemename_menu_tree__main_menu($variables){
   if (preg_match("/\bmenu-subnavigation\b/i", $variables['tree'])){
    return '<ul id="menu-navigation">' . $variables['tree'] . '</ul>';
  } else {
    return '<ul class="menu-subnavigation">' . $variables['tree'] . '</ul>';
  }
}

Step 2. Copy region--menu.tpl file from /sites/all/themes/omega/omega/templates into /sites/all/themes/mysubthemename/templates

Step 3. Open the /sites/all/themes/mysubthemename/templates/region--menu.tpl file in your favourite code editor and replace:

<nav class="navigation">
      <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix', 'main-menu')), 'heading' => array('text' => t('Main menu'),'level' => 'h2','class' => array('element-invisible')))); ?>

with:

<nav class="navigation clearfix">
      <div class="primary-menu inline">
    	<?php print '<h2 class="element-invisible">Main menu</h2>';?>
    	<?php 
	$main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu')); 
	print drupal_render($main_menu_tree);
	?>
    </div>

Step 4.  Create a file called mysubtheme.js inside /sites/all/themes/mysubthemename/js and paste the following code inside your newly created .js file.

/**
 * @file
 * A JavaScript file for the theme.
 */

(function ($, Drupal, window, document, undefined) {
Drupal.behaviors.mainMenuToggle = {
    attach: function(context, settings) {            
    	             //Toggle menu for mobile devices
  $('.region-menu .navigation').before('<a href="#" class="menu-toggle" title="Toggle Menu"><span class="line"></span><span class="line"></span><span class="line"></span></a>');
      
      $('.region-menu .menu-toggle').click(function(){
        $('#menu-navigation').slideToggle();
      });
	  var menuid = "#region-menu";                        
             //Simple hide/show event for the dropdown menus 
             $(menuid+' li').hover(
                 function(){
                 $('ul:first', $(this)).show();
                 },
                 function(){
                 $('ul', $(this)).slideUp();
                 }
              );       
    }
	
	
  };

})(jQuery, Drupal, this, this.document);

Step 5. Now we need to make sure our script from step 4 is loaded by Drupal. This can be done in a few ways but since this is a hardcoded menu we'll assume it will be used site wide so we'll just use the easiest way and add it to our subthemes .info file. To do this open you subthemes .info file and add following line:
scripts[0] = 'js/mysubthemename.js' right after base theme = 'omega' to keep everything nice and neat.

Step 6. We're almost done now and all thats left is to add some CSS styles to our menu. The code bellow will produce exact replica of our main menu as seen above and you'll likely want to alter the code bellow so it matches your subthemes and desired menu style. In
global.css (/sites/all/themes/mysubthemename/css/global.css) we'll add: 

/*****************************************************************************************
 *****                            TOGGLE  NAVIGATION                                                              *****
 *****************************************************************************************/
.menu-toggle {
  	color: #ffffff;
 	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  	background-color: #0e0e0e;
  	*background-color: #040404;
  	background: -moz-linear-gradient(top, #151515, #040404);
  	background: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
  	background: -webkit-linear-gradient(top, #151515, #040404);
  	background: -o-linear-gradient(top, #151515, #040404);
  	background: linear-gradient(to bottom, #151515, #040404);
  	-pie-background: linear-gradient(to bottom, #151515, #040404);
  	border-color: #040404 #040404 #000000;
  	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  	border: 1px solid #226889;
  	-webkit-border-radius: 4px;
         -moz-border-radius: 4px;
           border-radius: 4px;
  	clip: inherit;
  	display: block;
  	margin: 0;
  	padding: 4px 10px 7px 10px;
  	position: absolute;
  	right: 0;
  	bottom:10px;
  	clear:both;
  	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
    	 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);   
        behavior: url(/sites/all/themes/mysubthemename/PIE.htc);
}
a.menu-toggle {
	text-decoration:none;
}
.menu-toggle .line {
  	display: block;
  	width: 18px;
  	height: 2px;
  	background-color: #f5f5f5;
  	-webkit-border-radius: 1px;
     	 -moz-border-radius: 1px;
           border-radius: 1px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
     	 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
           box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin-top:3px;
	behavior: url(/sites/all/themes/mysubthemename/PIE.htc);
}
.* + html .menu-toggle .line {
  	display: block;
  	width: 18px;
  	height: 2px;
 	background-color: #f5f5f5;
 	 -webkit-border-radius: 1px;
  	   -moz-border-radius: 1px;
          border-radius: 1px;
 	 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  	   -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	margin-top:3px;
	position:absolute;
	behavior: url(/sites/all/themes/mysubthemename/PIE.htc);
}
div.region-menu #menu-navigation {
 	background: #444444;
 	display: none;
 	padding-bottom: 10px;
 	position:absolute;
 	z-index:10000;
  	width:70%;
  	left:30%;
  	opacity:0.90;
}
div.region-menu #menu-navigation ul {
	position:static;
	width:auto;
	display:block;
	padding:0;
	margin:0;
}
div.region-menu #menu-navigation {
  	display: none;
}
div.region-menu #menu-navigation li a {
	text-decoration:none;
	display:block;
	color:#ffffff;
	padding-left:5px;
	font-size:1.5em;
}
div.region-menu #menu-navigation li a:hover {
	color: #C0D3DC;
}
div.region-menu #menu-navigation li {
	margin-right:0;
	padding:0;
	list-style:none;
	list-style-image:none;
	display:inline-block;
	width:100%;
}
div.region-menu #menu-navigation ul li a {
	padding-left:10px;
}
div.region-menu #menu-navigation li ul li a:before {
        content: "\00BB \0020";
  }
div.region-menu #menu-navigation li a.active {
	background:#034462;
	border:1px solid #ffffff;
}

and in mysubthemename-alpha-default.css (/sites/all/themes/mysubthemename/css/mysubthemename-alpha-default.css) we'll add 

/*****************************************************************************************
 *****                              DROP DOWN NAVIGATION                                                       *****
 *****************************************************************************************/
.menu-toggle {
	display: none !important; }
/*.selectnav {
	display: none;
}*/
.navigation {
	background: transparent;
	display: block !important;
	margin: 35px 0 0 0;
	padding-bottom: 0;
	float:right;
}
div.region-menu #menu-navigation {
  	background: transparent;
  	display: block;
  	width:auto;
  	left: inherit;
  	position:relative;
  	z-index:inherit;
  	opacity:1;
	text-align: left;
        font-size: 0;
}
div.region-menu #menu-navigation li a.active {
	background:#034462;
	border:1px solid #ffffff;
}
div.region-menu #menu-navigation, div.region-menu #menu-navigation li, div.region-menu #menu-navigation ul, div.region-menu #menu-navigation a {
    padding: 0px;
    margin: 0px;
    list-style:none;
}
div.region-menu #menu-navigation li {
    font-size: 14px;
    display: inline-block;
	list-style:none;
	list-style-image:none;
	width:auto;
}
div.region-menu #menu-navigation li:first-child a {
	margin-left:0;
	margin-right:5px;
}
div.region-menu #menu-navigation li.active-trail {
    text-decoration: none;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3);
}
div.region-menu #menu-navigation li.active-trail a {
    font-weight: normal;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3);
    border:1px solid #ffffff;
}
div.region-menu #menu-navigation li a {
    display: block;
    cursor: pointer;
    text-shadow: 1px 1px 1px #555555;
    letter-spacing: -0.75px;
    color: white;
    border: 1px solid #226889;
    font-family: Ubuntu, sans-serif;
    height: 24px;
    font-size: 1.35714em;
    line-height: 1.26316em;
    padding: 5px 10px 5px 10px;
	margin-left:5px;
	margin-right:5px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;	
	border-radius:3px;
    behavior: url(/sites/all/themes/mysubthemename/PIE.htc);
}
div.region-menu #menu-navigation li a:hover {
    background:none;
    text-decoration: none;
    color: #C0D3DC;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3);
}
div.region-menu #menu-navigation li a:hover a {
    color: #713f1d;
    font-weight: normal;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3);
}
div.region-menu #menu-navigation li ul {
    display: none;
    margin: 0px;
    background: lightCyan;
    padding: 10px 20px 10px 10px;
    overflow: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid transparent;
    behavior: url(/sites/all/themes/mysubthemename/PIE.htc);
}
div.region-menu #menu-navigation li ul li {
    padding: 10px 0px 0;
    margin: 0px;
    background: none;
    height: 25px;
    text-align: left;
    display: block;
    float: none !important;
    margin-left: 10px;
}
div.region-menu #menu-navigation li ul li:hover {
    background: none;
}
div.region-menu #menu-navigation li ul li:first-child {
    padding-left: 0px;
}
div.region-menu #menu-navigation li ul li:first-child a {
    border-left: none;
}
div.region-menu #menu-navigation li ul li:last-child {
    border: none;
    text-align: left;
}
div.region-menu #menu-navigation li ul li a {
    padding: 0px;
    margin: 0px;
    background: none !important;
    font-size: 14px;
    color: #713f1d;
    background: none;
    border: none;
    text-shadow: none;
    height: auto;
    width: auto;
    text-shadow: none;
}
div.region-menu #menu-navigation li ul li a:hover {
    color: #015a94;
    background: none;
}
div.region-menu #menu-navigation ul {
    position: absolute;
    z-index: 10000;
}
div.region-menu #menu-navigation li:last-child a {
    margin-right:0;
}
div.region-menu #menu-navigation li ul li:last-child {
    padding-right: 0px;
}
div.region-menu #menu-navigation li ul li:last-child a {
    border-right: none;
}
div.region-menu #menu-navigation li.expanded a {
	margin-bottom:15px;
} 

Step 7. Now just go to /admin/config/development/performance and Clear all caches or simply use drush cc all and your menu should look exactly the same as main menu on our site. And now you don't just have a mobile first responsive website but you have a  responsive, mobile menu to go with it. Enjoy, and thanks for reading.

Category: 
Authored by: -- Wed, 04/17/2013 - 17:37