Input from a User – Mobile Navigation

Coming up with a good navigation structure is important in mobile web design. We’ve already looked at some issues when dealing with navigation in mobile devices. Now we are going to look at some ideas on over coming these problems.

Problem Recap

Just to recap some of the problems we may experience:

• Taking up too much screen real estate. Your space is limited, so when a mobile site has more than five pages, you can’t give a link to every page, from every page.
• Mobile users are time conscious. You don’t want to take up any extra time you don’t have to with menus, or causing people to scroll past them.
• You don’t have the hover state. Enough said.

Different Solutions

Of course there are different solutions to different types of problems.

Stack of Buttons

One common method is to see a large button that takes the entire width of the screen. This is fine, except it takes a lot of real estate, especially if there is a lot of menu options. This is a bad idea if you have more than 4 or 5 pages, as it will take too much space, and the user will have to scroll past it every time.

The one man advantage, despite it maybe being the easiest solution to build, is that it puts the menu in a place that is easy to find for the user.

Expanding Buttons

The stack of buttons is a real challenge, especially if you have/need a hierarchy. Therefore consider an expanding version where you can select one item and it expands to show you multiple additional options. You will have to tap it, and to control expansion on a tap, means that you will need to have some sort of JavaScript to show/hide menu options.

However, if you have only a couple of main categories, and each one has a couple of sub-categories, this may work to be a good solution.

Drop Down Menu

Many years ago, one idea in web design was to have navigation through a drop down menu, not like we think of today, but via a select tag. Some mobile websites are still doing this. This requires some basic JavaScript to detect the on change behavior, and load a new webpage when the behavior is detected.

This prevents a lot of screen space from being used, however, it also does not look nearly as nice as it could. As a minimum, it will require some JavaScript and HTML coding. With some styling, it can be made to look a little better at fitting into the design.

HTML Code

First PageSecond PageLast Page

JavaScript Code

// using jQuery as it is easier to follow, and known in class
$('#menu').on("change", function() {
  window.location.href = $(this).find("option:selected").attr("value");
  // this references the select tag
  // find() allows us to sub search to find the selected option
  // attrib() gets the value of the selected item
  // window.location.href allows you to set the location of the window i.e. navigate via JavaScript
  // this could be simplified to be:
  window.location.href = $(this).val(); // :) Much easier...
});

Or Watch on YouTube

Hidden Menu

Similar in concept is a hidden menu. This menu becomes visible by clicking on a navigation button. Often this button stays at the top of the screen, and is used to click open the navigation menu.

A small box with 3 horizontal lines in it is usually used to denote the navigation menu button. Bootstrap uses this by default, as do other designs. This is because this symbol is also used in several apps, it is simple enough that it can be made in SVG, PNG, or straight HTML/CSS.

To develop this you will need some HTML and JavaScript again.

HTML

JavaScript – Using jQuery to be easier

$(document).ready(function(){
	// assuming that jQuery is already loaded onto the page
	/* prepend menu icon */
	$('#nav-wrap').prepend('

');

	/* toggle nav */
	$("#menu-icon").on("click", function(){
		// hide or reveal the menu based upon what state it currently is in
		$("#nav").slideToggle();
		// add a class to the element, for styling purposes
		$(this).toggleClass("active");
	});

});

CSS
This basic CSS is needed to create the look. You will need to add many levels more of CSS to make the design look correct.

#nav {
  display: none;
}
#menu-icon {
  padding-left: 32px;
  background: #ddd url('threelines.png') no-repeat top left;
}

Or Watch on YouTube
 

Input from a User – Mobile Navigation was originally found on Access 2 Learn