Four Elements of Truly Mobile-Friendly Responsive Menus

There are hundreds of ways to create responsive navigation, limited only by your creativity and the boundaries of what CSS can accomplish. Good responsive navigation is a little harder – a responsive menu must become a mobile menu, adhering to the needs and rules of touch-driven devices. Mobile design is rapidly changing, and so the techniques also evolve. In this tutorial you’ll learn which qualities mobile-friendly responsive menus absolutely need nowadays and how you can solve some common problems.

The Basics

When designing a responsive menu, you must think first about the mobile state and how users will interact with it. Good mobile navigation embraces the following principles:

  • Menu toggles are easy to identify
  • All buttons and links are large enough to be tapped with a fingertip
  • Feedback is provided when an item is tapped
  • Submenus remain accessible
  • Visual effects are kept simple
  • Code used is cross-browser compatible

To illustrate, I’ll walk you through a simple responsive menu design that takes a horizontal menu and converts it into an off-canvas menu when the screen size is 768 pixels or less, covering tablets and smartphones. Then I’ll show you how to handle converting a more complicated menu that has drop-downs, pseudo-elements and transitions into an app-style mobile-friendly vertical menu.

Each menu has four main parts:

  1. The element the user taps to access the menu, affectionately called a toggle
  2. The menu itself
  3. When the conversion should happen
  4. How the conversion happens

You also need a viewport meta tag in your to keep things straight, but hopefully you already knew that:

<meta name="viewport" content="width=device-width, initial-scale=1">  

Off-Canvas Menus

While we’ve seen off-canvas drawers in web design for awhile now, the introduction of Google’s Material Design pattern library for mobile design is now being adopted by web designers looking for solid guidance for mobile-first websites. The off-canvas sidebar or menu is Google’s recommended style for mobile navigation, as it works well with most devices and layouts. You don’t need to follow the menu’s design guide in detail if you don’t want to, but can follow its advice in terms of spacing and behavior.

View Full Screen

View in Mobile Resizer


In our example, the menu is made up of an extremely simple unordered list.

<ul id="nav">  	<li class="toggle">  		<div class="bar1"></div><div class="bar2"></div><div class="bar3"></div>  	</li>      <li><a href="">HOME</a></li>      <li><a href="">PORTFOLIO</a></li>      <li><a href="">BLOG</a></li>      <li><a href="">CONTACT</a></li>   </ul>    

For an off-canvas menu to work by sliding in and pushing the layout over, you need to wrap everything in a div. This div needs a relative position at a minimum (so our absolutely positioned elements know where to sit) and ideally a transition to make its change flow nicely.

.container {      position: relative;      transition: all 0.3s;  }  

Read Full Article

Leave a Reply

Your email address will not be published.