Hamburger icon: new uses. Quick jQuery hamburger menu creation The magic is in the details

From Vitaly Rubtsov and could not resist the desire to realize it.

In this tutorial, I'll show you how to do this with just CSS, without any JavaScript. So, we'll see some CSS (and SCSS) tricks that will allow us to achieve almost the same smooth animation as this animated gif.

Here is an example of what we will be doing:

markup

Let's start with the HTML structure we'll be using. See comments for better understanding.

Initial SCSS Styles

Now let's add some basic styling to get the look we want. The code is pretty simple.

/* Base styles */ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: none; ) .container ( position: relative; margin: 35px auto 0; width: 300px; height: 534px; background-color: #533557; overflow: hidden; )

Switch operation

Before we start creating the rest of the interface, let's add a toggle function to easily transition from one state to another.

The HTML we need is already in place. And the style that makes it work is something like this:

// Hide the checkbox #toggle ( display: none; ) // Styling for the "open" state when the checkbox is selected #toggle:checked ( // Any element that you need to change the style of when opening the menu goes here with a selector ~ // Styles for opening the navigation menu, e.g. & ~ .nav ( ) )

Create a closed state

To make the closed state, we need to convert the menu items to lines to get the hamburger icon. There are several ways to obtain such a transformation. We decided to do it this way:

And here is the code that implements it.

$transition-duration: 0.5s; // Display navigation items as lines that make up the hamburger icon. nav-item ( position: relative; display: inline-block; float: left; clear: both; color: transparent; font-size: 14px; letter-spacing: - 6.2px; height: 7px; line-height: 7px; text-transform: uppercase; white-space: nowrap; transform: scaleY(0.2); transition: $transition-duration, opacity 1s; // Add Width For First Line & :nth-child(1) ( letter-spacing: -8px; ) // Add width for the second line &:nth-child(2) ( letter-spacing: -7px; ) // Settings for elements starting with the fourth & :nth-child(n + 4) ( letter-spacing: -8px; margin-top: -7px; opacity: 0; ) // Getting the lines for the hamburger icon &:before ( position: absolute; content: ""; top : 50%; left: 0; width: 100%; height: 2px; background-color: #EC7263; transform: translateY(-50%) scaleY(5); transition: $transition-duration; ) )

Please note that here we have placed only the basic styles for the navigation items, which are the most important. You can find the complete code on Github.

Create an open menu

To create an open menu, we need to restore the navigation items from lines to regular text links, as well as make a number of minor changes. Let's see how to do it:

$transition-duration: 0.5s; #toggle:checked ( // Open & ~ .nav ( // Restore navigation items from "lines" in menu icon. nav-item ( color: #EC7263; letter-spacing: 0; height: 40px; line-height: 40px ; margin-top: 0; opacity: 1; transform: scaleY(1); transition: $transition-duration, opacity 0.1s; // Hide the lines &:before ( opacity: 0; ) ) ) )

Magic in the details

If we look closer at the gif, we will see that all menu items are not moved at the same time, but in a checkerboard pattern. We can do this in CSS too! Basically, we need to select each element (using :nth-child ) and set the transition-delay value to fade in. This is definitely a recurring work. What if we have more elements? Don't worry, we can make things better with a little SCSS magic:

$items: 4; $transition-delay: 0.05s; .nav-item ( // Set a delay for navigation items when closing @for $i from 1 through $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition- delay; transition-delay: $delay; &:before ( transition-delay: $delay; ) ) ) )

Note that with this code, we will get the desired stepping behavior for the closing animation. We need to calculate $delay , which is slightly different for the opening animation, to get back the stepped transition. Like this:

$delay: ($items - $i) * $transition-delay;

Conclusion

Here we are with our fancy menu! We have also included some dummy elements as in the animated gif and you can see the .

So, we have created a simple and functional CSS-only menu. However, if you don't want to use the CSS toggle system, it can be perfectly replaced with a few lines of JavaScript with little effort.

We hope you enjoyed this tutorial and found it useful!

We've only done the layout so far.

5. Download jquery-3.3.1.min.js library

We connect to our HTML document before the closing tag body two files, one of them is still empty.

6. Create an event in JS

Write the following code to a file script.js

$(function()(
$(".menuBurger").on("click", function()(
$(".menu").slideToggle(200, function()(
if($(this).css("display") === "none")(
$(this).removeAttr("style");
}
});
});
});

We will not go into detail JS code, confine ourselves to general comments. I can advise, for those who are interested in programming on JS

This line $(".menuBurger").on("click", function()( tracks an event on a click on an element with the class .menuBurger.

$(".menu").slideToggle(200, function()( here the function is applied to the menu itself slideToggle(), which alternately expands or collapses the selected elements on the page in 200 milliseconds.

$(this).removeAttr("style");- removes from inline styles display: none;

Now on click hamburger menu expands and collapses, but there is a problem, when expanding the menu, it shifts the main content of the site down, but it is correct if it is on top of the content. At the same time, the page loading speed suffers, especially on the mobile Internet.

6. Expanding the menu on top of the content

This problem is solved with the help of menu positioning.

Primarily css code needs to be added

Menu (
position: relative;
}

In media query: .menu (
background: #eee;
position: absolute;
}

Thereafter, hamburger menu will expand on top of the main content. That's the way it should be.

Hamburger menu in CSS

1. Disable and delete all scripts

2. Insert into HTML file between tags div and ul line of code

3. Replace the tag div with class .menuBurger on the label

4. Link id input with attribute for label across #menuCSS

As a result, when clicking on the icon hamburger menu, a checkmark appears in the checkbox.

5. Add a pseudo-class to the media query checked

#menuCSS:checked (
display: none;
}

This means that when you click on the icon, the checkbox is checked, but it is hidden on the screen, only the icon is visible. The idea is that if the checkbox is not checked, then the menu is closed, and if it is checked, then the menu is expanded. The event with the opening and closing of the menu is suspended on the state of the checkbox.

6. Hide input v css

#menuCSS (
display: none;
}

7. Change the code in paragraph 5, see above in the article for the following

#menuCSS:checked + .menu (
display:block;
}

If the link between label and input #menuCSS ticked (checked), the menu is expanded. That's all the magic hamburger menu works on pure css and if you add smooth animation to it, then there is no difference from the menu on JS you won't feel.

Try to reduce the browser and you will clearly see how it works hamburger menu css

Conclusion

Both options are working. Menu on JS, let's say - correct, from the point of view of using the code. Menu on css- this is a "crutch", a kind of "manifestation of ingenuity", well suited to those who do not want to understand JS and is going to apply it only on his projects. There are no “crutches” for custom-made sites, I strongly recommend making a layout tailored for further use JS, other specialists.

You are probably already tired of reading articles and constantly listening to various discussions about three short lines of a hamburger menu. Is this a bad UI design technique? Or good? This post is not like that - it won't judge if this menu is good or bad. The bottom line is that I don't think it's the best design solution anyway. But the hamburger menu also has its strengths, especially when used in mobile design, in conditions of limited space. So what can we do? Just accept the hamburger menu as it is, despite all the shortcomings, and move on? Many sites and apps seem to have come to terms with this. And I think I can do better.

And then two things happened that made me change my mind. First, I came across . This is an article that really helps to understand the implications of using a hamburger menu. In particular, sites with such a menu suffer a serious decrease in user engagement. A review of such statistics just began to change my opinion.

The next incident happened while I was watching a colleague trying to use a new web application that had just such a menu. This was a developer who was very familiar with the hamburger menu interface, but when it came to using the app for his needs, he asked out loud, “How do I get there?”. Mind you, this is one of the smartest people I know, and he didn't even think about touching the hamburger menu icon. If someone this smart is having trouble navigating, what does that say about the typical user? My opinion has finally acquired a solid justification.

Finding a Solution

That's it, enough about the reasons for my disbelief in the power of the hamburger menu - it's time to talk about the solution. To start, I explored the specific benefits of using the hamburger menu:

• Scalability: this is probably the main plus and the main reason why so many sites and applications choose it. You can put a lot of navigation elements behind a small icon.
• Accuracy: it goes hand in hand with scalability, but still not the same thing. Designers want to create concise and neat designs, leaving enough space for the main content. Using a hamburger menu gives a sense of visual simplicity that appeals to any designer.

And if we are to create an alternative to the hamburger menu, it must somehow solve the problems associated with it:

• Clarity: It should be possible to find navigation elements easily, especially for first-time users.
• Involvement: The interface should provide hints and feedback explaining what the user can do with the product and when it is appropriate to use certain features.

The hard part: mobile

I decided to start with the most difficult problem and see if my solution works for mobile designs. After thinking through a lot of ideas, I came to the conclusion that the iOS tab bar menu is one of the best solutions for mobile interfaces. A lot of people tried to make the tab bar scrollable (to accommodate more than five options) or add “more” to the navigation - something like Plushkin, which has an extra room that will quickly fill up with junk. Also, both of these options still do not fulfill the main requirement - clarity, visibility of all possibilities is missing. So what can be done with the tab menu to fix this?

My solution is to combine the hamburger and tab bar in one approach. The result is a tab bar that opens up a set of options for each menu item.

I created a team productivity test application to illustrate my approach in action. By using this method, the user can clearly see the main functions and ways of using the product. And instead of being bombarded with a full list of menu items hidden behind a hamburger icon, the user is shown a few options that pertain to the tab they clicked on. This makes navigation easier to understand and digest, everything you need is always at hand, allows the user to see the application hierarchy.

Another plus of this design is the ability to use contextual notifications. In the case of the hamburger menu, you only have one place to display these notifications. If you stick to the tab bar layout, you can give hints to the user in any of the selected menu items.

Of course, the biggest win of this approach is Scalability. Yes, you're still limited to five categories, but that's fine. Honestly, I think that any site can fit its options into five categories if the designer thinks through the navigation wisely. Indeed, in each of these categories there may be five or six more subparagraphs.
In total, there are 30 possible navigation options without feeling overloaded for the user and without occupying the entire screen space.

Application to tablets

The integration of such a tab bar into tablets, as it is, seemed strange. Tablets are much wider, and using the same UI as mobile devices looked as ridiculous as a teenager in the clothes he outgrew a long time ago. So I went the other way. Instead of placing the tab bar at the bottom, I placed it on the side. It turned out to be more convenient in terms of using screen space and looked very natural. In addition, many users hold the tablet by its side, so this is just the target area for finger touch.

And what about the desktop?

Get ready… pull-out menu. That's right - try this approach on a desktop interface and you'll be faced with an undeniable reality: this option isn't new at all. The slide-out menu has been around for years, and just about anyone (even your mom) knows how it works. That's the beauty of this approach - nothing new.

Full disclosure

I don't know what to call this thing. Insert drawer? Or TABurger (TAB “tab” + burger)? Moreover, I don't know if anyone has created a similar solution before. Given the simplicity of such a menu, I cannot admit that I was the first. I know that a few apps use slide-out menus on some tab buttons (like Tweetbot), but they're usually implemented as quick access to features for advanced users, not for the purpose of increasing the navigation hierarchy. If you have such an example, let me know in the comments.
It does not matter whether such a menu is new or has long been invented. What matters is whether it's a better, more creative navigation solution than the hamburger menu. Stop saying to yourself “This cool site has a menu like this, so it must be the best” or “Everyone does it, so it’s right.” The design deserves a better, more thoughtful approach.
UPDATES
Collin Ebergardt noted on Twitter that the same UI is implemented in Windows Phone. I'm a Windows Phone user myself, and he's right. Although this type of interaction is used in Windows Phone only for the “more” option in the tab bar.

James Perih gave another example on Twitter. Take a look at the AHTabBarController created by Arthur Hemmer.

The hamburger icon is everywhere. Everywhere around us. In web applications, on mobile and desktop sites, in software. This ubiquitous three-line icon is now so commonplace that it almost feels like it's uniquely associated with a navigation menu. But is it?

Recently, discussions about the effectiveness of the hamburger icon have reached new heights. Articles by eminent designers and several sites including The Atlantic, TechCrunch, The Next Web and Nielsen Norman Group conclude that this is a UX anti-pattern, a trendy and easy-to-implement icon that is a regression from simpler and more expressive alternatives. . But anti-pattern or not, the use of the icon has grown so much that it is almost a must on most websites, especially on small screens.

Given my position as a designer on the m.booking.com team, and our use of this icon to show a slide-out menu, I decided to investigate this object. And I began by studying the origin of the badge, to try to understand its path to infamy.

This sounds promising. But even though the icon is classic and has been around forever, web designers have been less consistent in their use of it. The icon has been used for lists, dragging and reordering, alignment, and more. Perhaps this misuse explains its criticism as a menu icon. Perhaps due to its wide distribution and varied use, this icon has lost its ability to convey a single metaphor and, in turn, confuses users.

This whole story made me ask questions: “Are we wrong, and everyone else is right? Does it cause inconvenience to our users? Are there people who actually understand what these three little lines on our site are?

Regular readers of this blog won't be surprised to know that our next step was to ask these questions in the form of an A/B test. Like everything else, the hamburger icon was exposed to our many clients who, through interaction with the menu, had to determine if this icon was the best solution. By this time, I had read enough articles and informational data to be sure that the lack of consensus or other results were not due to the behavior of the buyers for whom the design was being developed. I decided to follow the method described James Foster, which many refer to, including one of our top mobile specialists - Luke Wroblewski.

We previously tested several icon placements and styles (with a border, without a border, with an icon, different colors, and so on), but never tested the word "Menu" - due to the difficulties associated with our desire to test in forty-one languages supported by us. However, we moved forward by finding translations with the help of our team of language experts and running a test:

Our original hamburger menu icon is to the left of the title and with a white separator bar to the right.

The word "Menu" inside a block with a white border with rounded corners, is also aligned to the left.

We have launched an experiment for our entire user base. Also, given the prominence and ubiquity of this UI element, we hoped it wouldn't take long to test our millions of customers around the world, in every supported language and on a large number of devices.

So what's the end result? Has the word won over fast food, as it did in James Foster's experiment, or will the bun with a cutlet win?

results

Of course, we cannot extrapolate these data to everything. In some countries, in some languages ​​or devices, it may have worked better or worse. But on a global scale, we can conclude that the “hamburger” was ridiculed too much. Overall, it was as recognizable as the word "Menu". In the spirit of design promotion management, we should probably consider other options, and maybe try adding cheese, a slice of bacon and french fries to our hamburger icon, but for now we are happy to report that our “three-line friend” is sticky everywhere. Its actual placement, shape, size, position, and color are, of course, subject to future tests.

Undoubtedly, this is a lesson for all of us about the essence of A/B testing. You never test the UI elements, the model, or the feature as a whole. You are testing these things on a very specific user base under specific and specific scenarios. What works for Booking.com may not work for you or your users. This is one of the reasons why we did our A/B testing. The conclusions of other experts, data from other sites, or hypotheses concocted in a pub while eating a hamburger will all be unproven until they are tested on our clients and on our platform.

Don't get confused by our own metaphor, but it's like a good hamburger recipe. Even if you wrote down all the ingredients for me exactly, you end up with a completely different hamburger. This, of course, will be affected by the quality of the meat available on the market, the flour used for bread, and a thousand other factors. For us personally, the idea is good if it is good for Booking.com. If we can replicate it on our site, and if it will work for all of our clients.

Our opinion

Surely you have seen on many sites a button in the form of an icon with three horizontal stripes, reminiscent of a hamburger. In most cases, on large and medium screen resolutions, this button is hidden, and appears only on small screens.

This button hides the navigation menu items, the idea is that at a certain screen width, by clicking on the icon, the user expands the menu himself if he needs it. If it is not necessary, then he immediately proceeds to view the content, without being distracted by the menu, since it is hidden.

The active part of this task, namely expanding and collapsing items hamburger menu can be implemented by means JS using the library jQuery or on clean css. Here I will immediately state that in css this is done in a "crutch way" on checkbox-ah, later I will explain what it is.

Hamburger menu in JS

1. We make up the usual top navigation menu with one paragraph of the content part of the site