Building Mobile-friendly Menus in Drupal 7Building Mobile-friendly Menus in Drupal 7

Categories:

When was the last time you looked at your site analytics? Over the last 5 years, mobile web browsing has taken off and many businesses and organizations have been brushing their mobile users under the carpet. You don't need to do this! You can convert a basic Drupal site to be more mobile-friendly in short amount of time, and using modules or plugins can save you a ton of time. Today we're going to look at some different techniques or plugins you can use to convert your site menu to a mobile-friendly format.



Defining an approach to mobile
 

Generally speaking, there are 2 techniques to making your site mobile-ready. For complicated sites or ones that did not initially take mobile design into consideration, you may have to build a totally separate theme, or even have a separate site for mobile. What would then happen is that you use a module to detect mobile users. In the case of a theme switch modules can be used to change the theme for these users. In the case of an entirely separate mobile site, you would use a module to redirect those users to your mobile site (modern convention would be to put this in a subdomain like m.mydomain.com). Some options are summarized below:
 
Mobile Theme is a one-stop solution that will switch the user theme on mobile devices.
Browscap + Mobile Switch will allow for more fine-grained control an functionality based on the actual browser (mobile or otherwise) being used by the viewer.
Mobile JS Redirect will allow you to redirect users to a separate mobile site.
 
The second technique is to keep your theme the same and instead define styles that will trigger on a certain browser size. This will allow your site to retain the same URL for all users and will generally reduce the amount of maintenance you have to do on your site theme. The drawback is that you have to remember that your content will remain the same on all browsers, so you may have to make liberal use of helper classes like ".mobilehide" or ".mobileshow" to hide or show certain elements on your pages. For instance, tables tend to be problematic elements for mobile because they don't resize easily. You might have to attach a CSS ".mobilehide" class to "display:none" for mobile users. You will have to do this for all your content to ensure you don't have any anomalies. Also, you have to ensure that things like embedded video are mobile-friendly (read HTML5 compliant).
 
 
How to trigger mobile styles

To load in a CSS file based on browser size you will need  to decide what size to trigger the new styles. Generally speaking, anything less than 700px is pretty safe. You might pick something like 767px to put it under iPad resolution. The first thing you need to do is open your theme .info file and add a line:
 
stylesheets[screen and (max-width: 767px)][] = styles/mobile.css
Make sure to create the associated mobile.css file. What this does is watches the browser width (also called the viewport). When it hits your specified width it will load the chosen CSS file that you can use to override default styling. Next add this javascript to your page.tpl file:

<script type="text/javascript">if ((window.screen.width < 768) || (window.screen.height < 768)){document.write('<meta name="viewport" content="width=device-width, initial-scale=1" />')}</script>
This is needed to prevent some mobile browsers from attempting to scale your mobile site in the browser. It ensures a 1 to 1 pixel relationship between the mobile browser and your styles.

 

Hiding/showing certain menu items by having a second menu
 

Often times you'll want to control what navigation your mobile users have access to. If you're going for a single theme, your options are limited because the HTML loaded must contain both the regular and mobile content. One way of including more menu control is to actually embed 2 menus onto the page. For desktop, the regular menu will be shown by default and the mobile menu will be hidden (e.g using display:none). When switching to mobile sizes the opposite will be true. You can display the hidden menu by placing a "display:block" declaration in your mobile.css file.

 

Style technique: Simple restyling
 

The easiest mobile menu is one that requires no special considerations. Simpler menus can be given simple float or inline declarations in order to collapse when the browser width is narrow:


 
Here we have a regular desktop navigation going across the page...


 
And a mobile version where links will drop below. In this case, working for mobile required no extra declarations in the mobile.css file. If you have your navigation area floated to the left or right of another element, a simple declaration of "float:none" in your mobile.css will make it drop below other elements, providing plenty of room instead of trying to squish it into a narrow mobile browser window.


Style technique: Astuteo's mobile menu


http://astuteo.com/mobilemenu
 
In the event you have a longer or more complex menu (like multiple tiers) you'll need something that is more versatile. To implement Astuteo's mobile menu you need to simply add the following HTML directly above your mobile menu in your page.tpl file:

<button class="nav-button">Toggle Navigation</button>

You also need to load the "mobilemenu.css" file when your mobile style triggers. You'll probably have to customize this CSS file to match your own menu declarations. For instance, I had to change ".primary-nav" to say "ul.mobile-links." There are a few more things I had to change in order to get it working with Drupal. My CSS changes here as follows:

/*
OVERRIDE DEFAULT STYLES
.primary-nav li:hover ul {
	display: block;
	border-top: 0 none;
}
.primary-nav li.parent > a:after {
	content: "?";
	color: rgba(255,255,255,.5);
	float: right;
}
.primary-nav li.parent > a:hover {
	background: rgba(0,0,0,.75);
}
*/

ul.mobile-links li.open ul {
	display: block;
	border-top: 0 none;
}
ul.mobile-links li.expanded > a:after {
	content: "?";
	color: rgba(255,255,255,.5);
	float: right;
}
ul.mobile-links li.expanded > a:hover {
	background: rgba(0,0,0,.75);
}
 
Here is an example of a site that uses this technique.


 
Vulcan has a complex multi tiered menu.


 
The mobile menu is clean, easy to use, and still contains all of their sub menu items.


Style technique: Responsive menu

https://github.com/mattkersley/Responsive-Menu
 Another technique requires javascript instead of CSS. The biggest difference is that this plugin turns an existing menu into a select menu. The biggest advantage here is that it can use the mobile OS dropdown widget, which adds some usability. The drawback is that you can't control the visual styling as much. To implement this you need to add the mobile menu javascript file to your .info file and then add this javascript function either in a separate file or inside your page.tpl.


jQuery(document).ready(function($){
	// --- Mobile navigation --- //
	$('.navigation-footer .menu-name-main-menu .menu').mobileMenu({switchWidth:640, prependTo:'.navigation-top'});
});
 
Here you will need to replace the references to the divs with your own.
 

 
Desktop styling.


 
Mobile menu activated.
 
Hopefully this helps you figure out some ways to deal with mobile menus in your Drupal site. Make sure to leave other suggestions in the comments below.

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.