1. 18 Nov 2013

    Hamburger Menus And How To Make Them

    By: Jason Bishop

    For reference, here is a helpful link to all the assets for the tutorial that follows and here is a list to a live demo of the example hamburger menu.

    What is a "Hamburger Menu"?

    "Hamburger menu" is a new term for the drawer UI pattern. When people who make web apps use this term, they are typically referring to the specific type of drawer experience found in modern touch-based apps wherein the user clicks a "drawer" icon and the main UI slides to one side to reveal a menu of navigation options. Some familiar apps that use this UI pattern include the Facebook and YouTube apps for iOS and Android.

    image image

    Hamburger menus are ideal for interfaces on small-format devices like tablets, phablets, and smartphones. Because the navigation menu is hidden from view by default, you can devote more precious screen real estate to content the user wants to consume. You can also take advantage of the extra space by bumping up font sizes for increased readability.


    Hamburger Menus for the Responsive Web

    Because of their ubiquity in touchscreen apps, hamburger menus have also become a popular UI pattern for the responsive web. Although drawers have existed in web apps for years, these new "hamburger-style" navigation schemes more closely mimic their mobile OS brethren. Top bar navigation schemes, like those found in Google Docs (Not Google Apps, which recently shifted away from the top bar navigation scheme.) and on Facebook work poorly for small viewing devices, making alternative interfaces like hamburger menus desirable. Web interface designers who create UIs with top bars intended for use on large monitors or laptop displays often create a second set of responsive styles that transform the top bar into a hamburger menu for small devices. This tutorial will teach you how to make this style of hamburger menu.


    Variations on the Hamburger Menu

    The hamburger menu pattern is at its core very simple: an icon that activates the menu, and the menu itself. As such, many variations of this pattern exist. For example, you might find nested navigation items organized as an accordion. The Android Facebook app features a "double hamburger menu" that displays navigation when the user swipes right and a friends list when the user swipes left. Have fun experimenting with various permutations but always frame your thought process by asking yourself "Does this help the user achieve his or her goals?"."


    Making Your Hamburger Menu

    Step One: Set up markup.

    First, we will create 3 main sections of markup:
    1. Page content. Sensibly enough, this section contains the main page content.
    2. The hamburger icon. By default, this button is hidden; when the webpage is being viewed on a small-format device, it displays at the top of the website instead of the top bar.
    3. The top bar. The top bar is shown by default. On its left side, there is a home logo that also serves as a home link. On its right side, there is an unordered list of navigation items. When the webpage is being viewed on a small-format device, the menu is hidden behind the page content until the user activates the hamburger menu.

    Page Content Markup:

    Step Two: Add a touch of jQuery.

    We need to use some light JavaScript to toggle between the two menu states (hamburger menu collapsed / hamburger menu expanded). Be sure to remember to include the jQuery library when writing jQuery-flavored JavaScript. When the user clicks the hamburger icon, we simply use use jQuery to add a class called ".nav-expanded" to the <body> tag. We will cascade off this ".nav-expanded" class to create the expanded menu state, an override to the default menu state.

    Step 3: The Hard Part (Hint: It's SCSS.)

    Well - this part isn't necessarily that hard, but it is a bit verbose since it needs to take so many page states into consideration. But that just comes with the territory when you're writing responsive websites! This section is written with 2 basic assumptions. First: the reader has a basic knowledge of CSS, such as how block, inline-block, and floated elements work. Second: the reader is in fact using SCSS (or SASS/LESS) with something like Compass for basic functionality. I could write out all the browser-specific style rules but I am guessing you would prefer I not do that.

    Let's also add in some baseline styles that will kick off the cascade:

    These styles will make the content just usable enough for the purposes of this demo. I've also restricted the minimum width of the body container to 360px, which is a reasonable lower bound. Note that the "body" and "html" selectors are also given height of 100%. As wrapper elements, these styles are important for the contained hamburger menu to fill the entire browser window vertically when expanded.

    Page Content Styling:

    Look closely at some of the styles being applied here. First, we've given some padding to the container. This provides side margins and, crucially, empty space at the top, so that content is not covered by the top bar or hamburger icon. The top bar and hamburger icon will be given fixed positions, so they will block out content that falls under them - something we do not want by default. Notice also the media query. When the window is below 767px wide, we drastically reduce the size of the side margins, to preserve content space. I've also elected to set the box-sizing rule to border-box, so that nothing overflows the window due to the additional paddings.

    The z-indexing or "stacking" of HTML elements is also important to note. Depending on the page state, different HTML elements may cover or covered by other HTML elements. Z-indexed elements must be given a position rule in order for their z-index rule to take effect, so we've used "position: relative;" here. The position rule will also be important for sliding the content left and right - more on that later in the article.

    Finally, I've added some CSS3 transitions for this element. I chose to write them longhand for the sake of clarity. These style rules will provide animations for opening and closing the hamburger menu.

    Hamburger Icon Styling:

    It's time to start styling the hamburger icon itself.

    By default, the hamburger icon does not show. This is because in normal views, navigation is supplied by the top bar interface so we don't need to toggle the hamburger menu on and off. Notice that the media query overrides this default when the window is below 767px, the point at which we want the user to no longer have access to the top bar and use the hamburger menu instead.

    The rest of the styles are concerned with the display behavior of the hamburger icon when it is visible. We give the appropriate size using width, height, and padding. We center the text vertically using line-height. We anchor the element to the top of the page using "position: fixed;" and z-index it so that it stacks on top of all the other elements. We create the sliding effect by using CSS3 transitions.

    Top Bar Styling:

    Let's also style the top bar. This is the most complex element because when the window size drops below 767px, it actually becomes the hamburger menu itself. This is how it's done:

    As with the hamburger icon, we are first concerned with its default styling. Again, we size it, position it, and z-index it appropriately. We also provide default styling to the interior elements. First, the #home-logo element is floated right; second, the unordered list of navigation items is floated left. Within the unordered list, list items are serialized horizontally.

    Now look at the media queries for "nav", "ul", and "li" elements. When the window is less the 767px wide, the top bar becomes the hamburger menu. Notice the z-indexing change. It is now hidden behind the page content. It also now vertically fills the window with its height property (This is why we gave the <html> and <body> tags heights of 100%.). The unlinked list is now floated left and has a width of 100%, causing it to fall beneath the "#home-logo" element rather than beside it. Likewise, each of the li elements are also given a width of 100%, making them serialize vertically rather than horizontally.

    The Hamburger Menu's Expanded State:

    And finally, we put the special sauce in, which turns out to be very simple!

    When the "body" element has a class of ".nav-expanded" applied to it (Remember the snippet of JavaScript we wrote.), slide the "#page-content" and "#hamburger-icon" elements 75% to the right to reveal the hamburger menu (having transformed from its top bar state) below.

    If you want to view your results on a mobile device, also add in this snippet of HTML inside the document <head> tag:

    This will make sure that your device properly recognizes the 767px breakpoints you specified in your media query and provides some other features specific to touch-based interactions.

    And there you have it! A simple hamburger menu interface. Some next steps would be to provide visually pleasing styles and perhaps some usability features, such as the ability to click anything inside of "#page-content" to collapse the hamburger menu. The sky's the limit!

    Again, here is a link to all the assets in the tutorial and here is a link to a live demo of the hamburger menu.