Today we will be covering the basic methods of creating an HTML5 based responsive menu. We will also take a look at some of the best free resources in that to contribute to our purpose.

Responsive web design aka RWD is not a new term for you I’m sure. It has been a few years since Ethan Marcotte coined the term Responsive Web Design. Yet, web designers are only beginning to appreciate the depths of RWD. Most of us (myself included) are having difficulty keeping up with the pace web design is evolving. In fact in this very article, I describe two ways creating a responsive menu, you’ll see it yourself how it is evolving.

And it’s as if new coding techniques weren’t enough, the design trends are evolving and keeping us on our toes. But it’s alright. Just keep visiting and we’ll keep up with everything latest in web design right here.

Let’s come back to today’s topic which is creating responsive menus.

Responsive Menu Design: Past and Present

If we don’t know the past and present, we cannot design for the future. That’s a reason I wanna quickly recap how we reached here, today’s responsive menu designing techniques.

As we are starting to emphasize more and more on user experience, web designers are realizing that navigation bar is one of the elements that need to be modernized the most. During the previous year, we have seen so many trends related to menu design.

The initial idea was to enlarge the already in-use navigation bar so that links are clearly visible and tap-able on mobile devices. Our menu is an example of this style.
Then we were bombarded with hamburger icon-based menus that stay minimized on a corner, and reveal a big bold menu when clicked. That trend is still very much in practice because of its high usability. It keeps the main web design clean but gives the user easy access to the whole website… however, sometimes users have difficulty finding the navigation bar and that’s a drawback.

Near the end of this year, full screen responsive menus are starting to emerge. They work in the same fashion as jQuery Lighbox displays pictures.

Here are a couple of free jQuery plugins for full-screen navigation bars.

Full-Screen Pop-Out Navigation

Full Screen Menu

Full Screen Overlay Effects

Fullscreen Responsive Menu

Tech Crunch believes we should stop using hamburger icon menus altogether. They believe tabs are the solution to mankind’s… web design-kind’s problems.

I think it’s only a matter of time until we start seeing image-rich card/tile based full-screen responsive menu bars. The final menu must look something like this:

I think it’s only a matter of time until we start seeing image-rich card/tile based full-screen responsive menu bars. The finalized menus will look somewhat like Windows 8.0 start menu. That way, the menu could contain lots of content, that will be tap friendly and highly interactive, overall a great user experience. We already know that such card-based designs are rapidly becoming popular for displaying posts/articles, so why not navigation bars.

Basics of Creating a Responsive Menu

There are many ways to create responsive menu bars. The old method was to put one piece of code in the head section, and the rest in body. Here’s the example:

Code for the head section:

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

Viewport meta is the magical meta code that opened the doors of responsiveness to us. This enables the menu to break to multiple columns when it is opened on mobile devices.

Here’s the body part.

 <nav class="clearfix"> 
   <ul class="clearfix"> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
  <a href="#" id="pulldown">Menu</a> 

You can see the little link in the end with ID “pulldown”. That is for mobile devices. When anyone visits your website on a mobile device, the whole menu will not be displayed, instead only a button with “Menu” written on it will be displayed.

We will hide “pulldown” button for large screens using CSS:

nav a#pull { 
 display: none; 

I’m sure you already know why we used clearfix as class on nav code, but if you don’t, you can check out clearfix hack by Nicolas Gallagher.

The modern concept

If we wanted to avoid displaying a button called “menu” on small screen devices, we used jQuery. For instance, Matt Kersley’s responsive menu plugin converts <ol> and <ul> codes to <select>. But it seems that method is not required now.

The role attribute! This is the latest and most prolific development in responsive menu design. There are four properties of role attribute:

  1. full-horizontal
  2. select
  3. custom-dropdown
  4. off-canvas

This attribute removes the need of any plugins are any other special jQuery. Here’s how this code works.

 <nav role="select"> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 
      <li><a href="#">MENU ITEM</a></li> 

For a detailed look on these modern concepts, you can take help from Tim Pietrusky’s beautiful article.

More Free Resources and Examples

Now let’s look at some free resources.

BootM: Pure CSS Based Multi Level Responsive Navigation Menu

A menu system using the famous bootstrap CSS framework. BootM is a pure CSS based navigation system, its responsive, supports unlimited levels and icons as well.

Pure CSS Navigation Bar


A very intelligently made, cross browser tested, and animated CSS navigation bar plugin. You can easily customize according to your website’s needs.



Free for personal use, this is a mighty navigation bar plugin that can cater all your needs.


Contextual Ajax Sliding Panel

A quick and easy way to add a contextual Ajax sliding panel to your site.

Contextual Ajax Sliding Panel


The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.


Responsive Side Toggle Menu

Side Toggle Menu lets you add a side bar menu to your page that slides in from the left or right edge of the browser window.

Side Toggle Menu


Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.


Bootstrap Off Canvas

This website did not provide a live demo, however it did give me an animated GIF.

Off Canvas Menu


It’s gotten so late. Let me conclude the article immediately.

The core idea behind all noise is that we need to deliver a better experience to user. For that we need to create responsive menu designs that don’t only look gorgeous but they must also be interactive and simple to understand.

Last year, we just enlarged our already installed navigation bars. Later on, web designers went crazy with hamburger button icons.

In future, in my personal opinion, web designers would like to use full screen menus with a fixed button/option for opening the menu. I believe tap-able, image based menus will start to rule the web in a few months. I’m thinking of implementing such a menu here right now.

Pin It