Menu
homeYandex

Hamburger icon: new ways to use it. Why you should avoid hamburger menus and how to do it

We have only done the layout so far.

5. Download the jquery-3.3.1.min.js library

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



6. Create an event in JS

We write the following code in the script.js file

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

We will not analyze the JS code in detail; we will limit ourselves to general comments. I can recommend it for those who are interested in programming in JS

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

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

$(this).removeAttr("style");

- removes display: none from inline styles;

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

6. Expanding the menu on top of the content

This problem is solved using menu positioning.

In the main CSS code you need to add
Menu (
}

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

position: absolute;

After this, the hamburger menu will expand on top of the main content. That's how it should be.

Hamburger menu in CSS

1. Disable and delete all scripts

2. Insert a line of code into the HTML file between the div and ul tags 3. Replace div tag

with class .menuBurger on label

4. Link id input to the for label attribute via #menuCSS

As a result, when you click on the menu hamburger icon, a check mark appears in the checkbox.

5. Add the checked pseudo-class to the media query
#menuCSS:checked (
}

display: none;

This means that when you click on the icon, a tick is placed in the checkbox, 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 opening and closing the menu is dependent on the state of the checkbox.

6. Hide input in CSS
#menuCSS:checked (
}

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

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

If connecting link between label and input #menuCSS is checked (checked), then the menu is expanded. That's all the magic, the hamburger menu works for pure CSS and if you add smooth animation to it, then you won’t feel any difference from a JS menu.

Try to make your browser smaller and you will clearly see how the CSS hamburger menu works

Conclusion

Both options are working. The menu in JS, let’s say, is correct from the point of view of using code. A menu in CSS is a “crutch”, a kind of “manifestation of ingenuity”, well suited for those who do not want to understand JS and are going to use it only on their projects. For custom-made sites, there are no “crutches”; I strongly recommend that the layout, tailored for further use of JS, be done by other specialists.

Vitaly Rubtsov couldn’t resist the desire to realize it.

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

Here's an example of what we'll be doing:

Marking

Let's start with HTML structures, which we will use. See comments for better understanding.

Control Story Statistics Settings

Starting SCSS Styles

Now let's add some basic styles to get what we want. appearance. The code is pretty simple.

/* Basic 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, we'll add some toggle functionality to easily move from one state to another.

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

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

Creating a closed state

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

And here is the code that implements this.

$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; line-height: 7px; white-space: nowrap; scaleY(0.2); transition: $transition-duration, opacity 1s; :nth-child(1) ( letter-spacing: -8px; ) // Adding width for the second line &:nth-child(2) ( letter-spacing: -7px; ) // Settings for elements starting from the fourth & :nth-child(n + 4) ( letter-spacing: -8px; margin-top: -7px; opacity: 0; ) // Get lines for the hamburger icon &:before ( position: absolute; content: ""; top : 50%; width: 100%; background-color: #EC7263; transform: translateY(5); transition: $transition-duration;

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

Create an open menu

To create open menu, we need to restore navigation points from lines to regular ones text links, and also do a series minor changes. Let's see how to do this:

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

Magic is in the little things

If we take a closer look at the gif, we see that all the 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 gradually increase. This is definitely repetitive work. What if we have more elements? Don't worry, we can make everything better using a little SCSS magic:

$items: 4; $transition-delay: 0.05s; .nav-item ( // Set the 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 step behavior for the closing animation. We need to calculate $delay , slightly different for the opening animation, to get the step transition back. Like this:

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

Conclusion

We're done with our fancy menu! We also included some dummy items as in animated gif and you can see.

So we have created a simple and function menu only in CSS. However, if you don't want to use the CSS toggle system, it can be replaced perfectly with a few JavaScript strings without much effort.

We hope you enjoyed this tutorial and found it useful!

You are probably already tired of reading articles and constantly listening to various discussions about three short lines hamburger menu. Is this a bad UI design technique? Or not bad? This post is different - it won't judge whether this menu is good or bad. The point is that I don't think it's the best design decision, one way or another. But the hamburger menu also has its own strengths, especially when used in mobile design, in conditions limited space. So what can we do? Just accept the hamburger menu as it is, despite all the shortcomings, and move on with your life? Lots of sites and apps seem to have come to terms with this. And I believe that I am capable of the best.

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

The next incident happened when I was observing 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 application for his needs, he loudly asked, “How do I get there?” Please note this is one of the the smartest people, that I know, and he didn't even think about touching the hamburger menu icon. If someone so smart has trouble navigating, what does that say about the typical user? My opinion has finally acquired a solid foundation.

Finding a solution

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

  • Scalability: this is probably the main plus and main reason, why so many sites and applications choose it. You can fit a lot of navigation elements behind a small icon.
  • Accuracy: this 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 is attractive to any designer.

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

  • Understandability: Navigation elements should be able to be easily found, especially by those using the product for the first time.
  • Engagement: The interface should provide hints and feedback that explain what the user can do with the product and when it is appropriate to use certain features.
The tricky part: mobile

I decided to start with the most complex problem and check if my solution is suitable for mobile designs. After mulling over a ton 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 have tried to make the tab bar scrollable (to fit more than five options) or add “more” to the navigation - something like Plyushkin, who has an extra room that will quickly fill with junk. Also, both of these options still do not fulfill the main requirement - clarity, visibility of all possibilities is missing. So what can you do with the tab menu to fix this?

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

I created a team productivity test app to illustrate my approach in action. Using this method, the user can clearly see the main functions and uses of the product. And instead of falling asleep full list menu items hidden behind the hamburger icon, the user is shown several options that relate to the tab he clicked on. This makes navigation easier to understand and digest, everything you need is always at hand, and allows the user to see the hierarchy of the application.

Another advantage of this design is the ability to use contextual notifications. In the case of a hamburger menu, you only have one place to display these notifications. If you stick with a tab bar layout, you can provide hints to the user on any of the menu items they select.

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

Application to tablets

Integrating such a tab bar into tablets as it is seemed strange. Tablets are much more versatile, and using the same UI as mobile devices looked as awkward as a teenager in clothes that he had long since outgrown. So I went a different route. Instead of placing the tab bar at the bottom, I placed it on the side. This turned out to be more convenient in terms of using screen space and looked very natural. In addition, many users hold the tablet by the side, so this is the target area for finger touch.

What about desktop?

Get ready...pull-out menu. That's right - try this approach on a desktop interface and you will be faced with an undeniable reality: this option is not new at all. Sliding menus have been around for years, and just about anyone (even your mom) knows how it works. That’s the beauty of this approach – it’s nothing new.


Full disclosure

I don't know what to call this thing. Inlay slider? 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 can't bear to think that I was the first. I know a few apps use slide-out menus on some tab buttons (like Tweetbot), but they're usually implemented like this fast access to functions for advanced users, and not for the purpose of increasing the navigation hierarchy. If you have such an example, let me know in the comments.
It doesn’t matter whether such a menu is new or has long been invented. What matters is whether it is a better, more creative navigation solution than a hamburger menu. Stop telling yourself “This cool site has this menu, so it must be the best” or “Everyone is doing it, so it must be right.” Design deserves a better, more thoughtful approach.
UPDATES
Collin Eberhardt noted on Twitter that the same UI is implemented in Windows Phone. I myself Windows user Phone, and he's right. Although this type of interaction is used in Windows Phone only for the “more” option in the tab bar.

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

You will have a harder time providing information to the user about a specific item if it is only visible when the user opens the menu looking for another item.

You can do it like in the Jawbone Up application: show an icon reflecting the essence of the notification next to the button side menu.

This approach does not scale very well because it involves creating large quantities special icons, and you, as a designer, will sometimes have to use standard icons, which carry less meaning.

Here's the opposite example: Twitter's tab bar, which shows the user the context of the notification and allows the user to go directly to the relevant screen.

Awareness of the problem

It may seem that you obliged doing all this to save more screen real estate, but we often misunderstand what people actually see. It may seem to you that people see everything that is in front of their eyes, but in reality we all have a certain zone of concentration, even if the screen size is minimal ().

Therefore, the issue of saving screen space can be resolved without compromising navigation — and in accordance with basic principles HCI (Human Computer Interaction) that require us to provide feedback and displaying application status.

Note: You may need to brush up on your understanding of HCI principles — I'm pretty sure this will help you avoid a lot of design mistakes that people with a visual approach to design make.

Solution

We have talked a lot about the problem, but the solution is still not clear.

When can you use the hamburger menu?

In some very rare cases this pattern is actually justified, but in general it should be avoided.

IRCCloud is an example of a justified (to some extent) use of the hamburger button: it is used to navigate between channels and channel participants.

This is acceptable because the main screen doesn't have any child screens that need hierarchical navigation; all content is presented in a modal form.

But even in this case, it is clear that the interface is overloaded, and the information architecture requires revision.

The side menu displaying channel members (on the right) takes the place of an action button, under which all actions related to the channels could be hidden. Instead, the designers had to mix everything possible actions(related to channels, network and account) into one action menu:

This brings us smoothly to the next section of the article:

How to replace the hamburger button?

The side menu pattern entails bad information architecture: A hamburger button is another interface element that doesn't show any action sequence — until people use it.

“The solution is to update the information architecture.”

The pictures above are an example of how you can avoid the side menu. Colored dots help you track how interface elements have been reorganized.

Conclusions:

  • The status is presented on the Messages tab
  • Interface elements are always visible and accessible
  • No conflict between navigation gestures

    • In addition to solving the main problems, we can gain some vertical space by hiding the app's navigation bar when scrolling down (see below). Facebook example, but this is also used in Safari). The tab bar remains in place, allowing us to navigate even when the app's navigation bar is hidden.

    If you're in a minimalist mood, perhaps a toolbar will suffice. The point is to make navigation visible, give direct access to functions, avoid conflicts between navigation gestures, and display alerts on the icons they belong to.

    [Update] In the case of websites, you should also reconsider the information architecture, but instead of using these iOS patterns, I recommend displaying the navigation at the top, as a list: example. If it's obvious that this is the site's navigation, people will definitely scroll further and immediately see all the other options available.

    Also, getting back to the topic of websites on mobile devices: Be sure to remove the 300ms tap delay using these tips or using touch events.

    How does this all scale?

    I'm bringing it here iOS examples interfaces —  the best solution on them is the use of a panel with tabs or tools.

    But what if your tab bar has more than 5 items?

    In such situations, the first thing you need to do is to reconsider the information architecture of the application. But if you still have to go beyond the five tabs, the following method is usually used: last tab gives access to a list of remaining options.

    This implementation faces another problem: after scrolling, the toolbar remains in an undefined state. Rookie hides the panel after the user selects one of the actions — crop, rotate, etc. Thus, the undefined state of the panel is “reset”, and when reopened it is displayed in its original state.

    Conclusion

    So, you've read an article about the problems with the sidebar pattern and their solution within iOS, which were built into the system from the very beginning.

    I hope the article was useful and understandable to you. If you have any comments please write to me

    The hamburger icon is everywhere. Everywhere around us. In web applications, on mobile and desktop sites, in software. This ubiquitous three-line icon is so common these days that it seems as if it is uniquely associated with the navigation menu. But is it?

    IN Lately discussions about the effectiveness of the hamburger icon have reached new heights. Articles by prominent 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, more expressive alternatives. . But anti-pattern or not, the use of the icon has grown so much that it is almost a fixture 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 display a slide-out menu, I decided to explore this object. I began by studying the origins of the icon to try to understand its path to infamy.

    This sounds promising. But even though the icon is a classic and has been around forever, web designers have been less consistent in its use. 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 really wrong and everyone else is right? Does this cause inconvenience to our users? Are there people who actually understand what those three little lines on our website are?”

    Regular readers of this blog will not be surprised to learn that our next step was to ask these questions in the form of an A/B test. Like everything else, the hamburger icon was subject to the influence of our many customers who, through interaction with the menu, had to determine whether the icon was the best solution. By this time, I had read enough articles and information to be confident that the lack of consensus or different results were not due to the behavior of the customers for whom the design was being developed. I decided to follow the method described James Foster, which has been referenced by many, including one of our top mobile specialists - Luke Wroblewski.

    We've previously tested several icon placements and styles (with border, without border, with icon, different colors, etc.), but we've never tested the word "Menu" due to the complexities of our desire to test in forty-one languages , supported by us. However, we went ahead, found the translations with the help of our team of language experts and ran the test:

    Our original "hamburger" menu icon is to the left of the title and with a white separating line to the right.

    The word "Menu" inside a block with a white frame with rounded corners, is also left-aligned.

    We launched an experiment across our entire user base. And also, given the popularity and ubiquity of this element user interface, hoped it wouldn't take long to test millions of our customers around the world, in every supported language and large number devices.

    So what is final result? Did the word defeat fast food, as it did in James Foster's experiment, or will the bun and cutlet win?

    Results In this experiment, replacing the icon with the word “Menu” did not have a significant impact on the behavior of our users. With the help of our huge base users, we can, with a very high degree of probability, state that, in particular for Booking.com visitors, the hamburger icon performs its role in the same way as the version with a text description.

    Of course, we cannot extrapolate this data to everything. In some countries, on some languages ​​or devices, it may have worked better or worse. But on a global scale, we can conclude that the "hamburger" has been ridiculed too much. Overall, it was as recognizable as the word “Menu.” In the spirit of managing design progress, we should probably consider other options, and maybe try adding cheese, a rasher of bacon and French fries to our hamburger icon, but for now we're happy to report that our "three-line friend" is plastered all over the place. Its actual placement, shape, size, position and color is, of course, a subject for future testing.

    Surely this is a lesson for all of us about the nature of A/B testing. You never test the UI elements, the model, or the function as a whole. You test these things on a very specific custom audience under certain 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. Findings from other experts, data from other sites, or hypotheses made up in a pub while eating a burger will all be unproven until they are tested with our customers and on our platform.

    Not to get lost in our own metaphor, but it's like a recipe for a good hamburger. Even if you wrote down all the ingredients exactly after me, you will end up with a completely different hamburger. This, of course, will be affected by the quality of meat available on the market, the flour used for bread and thousands of other factors. For us personally, the idea is good if it is good for Booking.com. If we can repeat it on our website, and if it works for all our clients.

    Our opinion You should always test your ideas and see what the data tells you and what questions arise. My advice? Take a bite and see what happens.