Using media queries is great. Every defined size of the viewport can be matched to a specific stylesheet for example. But most of the so called responsive websites are not getting the maximum out of this great possibility.

In most cases it is a problem where to put the main navigation. It should be big enough to touch but small enough not to compete with the main content.

The solution is pretty easy: Let’s make a hamburger.

A hamburger menu has become the way to display a navigation menu on mobile devices. It has the look & feel like an options menu that can be seen recently in all kind of modern native smartphone apps.

A demo of this menu inside a website template can be viewed here.
The code is also available in a public repository on github.

So let’s start with some markup…

The Markup

First of all, a simple HTML5 markup structure have to be generated.




The hamburger button can be as simple as this:


The rest of the markup needs nothing special, except a container element around the whole content. This container will be moved to the right after clicking the Hamburger Button. And another div element that covers the content while the menu is shown to make everything clickable on the right and to close the menu again. A metatag for the viewport should be set to scale the content correctly on mobile devices.

Not to forget to link jQuery an jQuery UI, a stylesheet and a javascript in the head.

A completed markup example can be viewed here.

The Stylesheet

At the beginning, horizontal scrolling for the whole page has to be disabled, otherwise the content will be scrollable when it will move to the right out of the viewport.

A typical feature of a mobile website is the fixed header on the top, so the hamurger is clickable all the time. But don’t set a position, so it will be fixed to the top of the page and still be in the container when the container moves to the right.

The hamburger can easily be made with CSS3. Just add some gradients and rounded corners like this:

The navigation is fixed to the top left of the viewport and layered in the background. So it will appear if the content moves to the right. The width is set to 70% and thats the proportion will also use later in the animation:

A fully completed stylesheet example with a bit of added color and shadows can be viewed here.

The Javascript Animation

Only two click events have to be defined. One to open the menu and one to close it.

On click jQuery gets the current static width of the content and sets it static to the content element, because if it moves to the right it should keep its original dimensions and not scale to a tiny container.

Also after clicking the hamburger, show the contentlayer above the content on the right, so this transparent layer above content on the right can be used as a big close button. And the scrolling has to be disabled on mobile devices.

Finally do the animation by setting the left margin to 70%.

For closing the menu, fetch the click event on the contentLayer. Unbind the touchmove (enable scrolling) an animate the content back again. After that the width of the content can be set again to its dynamic width and the contentLayer has to be disabled again.

A jQuery example can be viewed here.

A live demo of this menu inside a website template can be viewed here.
The code is also available in a public repository on github.

I hope you found this useful – I’m looking forward to your comments or requests for new articles.

(This blog post is also available in German)

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *