Responsive hamburger menu. Fast jQuery hamburger menu creation. What about the desktop
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 prevalent that it looks like it is uniquely associated with navigation menus. But is it?
Recently, discussions about the effectiveness of the hamburger icon have reached new heights. In articles by eminent designers and on several sites including The Atlantic, TechCrunch, The Next Web, and the Nielsen Norman Group, it is concluded that it is a UX antipattern, a trendy and easy-to-implement icon that is a regression from simpler, more expressive alternatives. ... Antipattern 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 display a pull-down menu, I decided to investigate this object. And I started by studying the origin of the icon in order to try to understand its path to shame.
This sounds promising. But even though the icon is classic and has always been around, web designers have been less consistent in using it. The icon has been used for lists, drag and drop, reorder, alignment, and more. Perhaps this misuse explains its criticism as a menu icon. Perhaps due to its widespread and varied use, this icon has lost the ability to convey a single metaphor and, in turn, confuses users.
This whole story prompted me to ask questions: “Are we really wrong, and everyone else is right? Does this cause any inconvenience to our users? Are there people who really understand what these three little lines are on our site? "
Regular readers of this blog won't 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 has been influenced by our many customers, who, through interaction with the menu, must determine if this icon was the best solution. By this time, I had read enough articles and data to be sure that the lack of consensus or other results was not due to the behavior of the buyers for whom the design was developed. I decided to follow the method described James Foster which has been referenced by many, including one of our best mobile specialists - Luke Wroblewski.
We've previously tested multiple placements and icon styles (borderless, borderless, iconic, different colors, and so on), but never tested the word "Menu" - due to the complexities of wanting to test in forty-one languages supported by us. However, we went ahead finding 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 header and with a white separator bar to the right.
The word "Menu" inside a box with a white rounded border is also aligned to the left.
We ran an experiment across 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? The word won out over fast food, as it did in James Foster’s experiment, or did the bun and cutlet win?
results
During 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 user base, we can state with a very high degree of probability that, in particular for Booking.com visitors, the hamburger icon fulfills its role in the same way as the text description version.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 globally, we can conclude that the "hamburger" was ridiculed too much. Overall, it was as recognizable as the word "Menu". In the spirit of managing the promotion of the design, we should probably consider other options, and maybe try adding cheese, a slice of bacon and fries to our hamburger icon, but now we're happy to announce that our "three-line friend" is stuck everywhere. Its actual placement, shape, size, position and color are of course a subject for future tests.
This is undoubtedly a lesson for all of us about the essence of A / B testing. You never test UI elements, model or function in general. You are testing these things with a very specific user 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 own A / B testing. Findings from other experts, data from other sites, or hypotheses invented in a pub while eating a hamburger will all be unproven until tested on our clients and on our platform.
Not to get lost in our own metaphor, but this is like a recipe for a good hamburger. Even if you wrote down all the ingredients exactly after me, you end up with a completely different hamburger. This will, of course, be influenced by the quality of the meat available on the market, the flour used for bread and a thousand other factors. For us personally, it’s a good idea if it’s good for Booking.com. If we can repeat it on our website, and if it will work 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.Simple, functional, intuitive and memorable, like any road sign, the hamburger icon became a real trend last year, and an integral part of any modern website and mobile app design.
This simple icon mimics the look and feel of a menu list, perfect for devices with small screens and websites where the visual is important and navigation should be out of the way. It is a highly effective and viable solution that meets the demands of today's world.
Like any other element of the interface, the hamburger icon may have some deviations from the original version, based on the needs of each individual project.
Depending on the project and theme, the hamburger icon can take many forms that complement the design or become its own distinctive feature.
Today's collection includes 20 different variations of the hamburger icon.
The hamburger icon by designer Dave Games immediately gives a lot of warm energy. The cartoon style adds playfulness and creates only the most positive emotions. You can safely use such an icon on most modern illustrated interfaces.
This ocean wave icon was designed by Matt Walker. She will feel great on various projects dedicated to the sea. Light blue as the main color and a border around it make this badge exclusive.
A clean, bright, and witty implementation will allow this construct to work like a menu icon on culinary sites. In this case, the interface will get a nice artistic flavor.
The designer offers 10 interesting versions of hamburger badges that are crafted with passion. The series covers different types of burgers: one with cheese, another with bacon, the third with turkey, and many others. If you have a website or mobile app dedicated to a fast food restaurant, then they will certainly come in handy. They are so visually interesting that they can find place in almost any topic.
And this project presents a realistic vector hamburger. In this case, the closing button is made in the form of French fries, taking the shape of "X", with or without sauce. This is a creative solution that can add exoticism to your page design.
The official Star Wars website includes an interesting hamburger icon that rotates. Each line is divided into two parts so as to obtain the vector of light reflection of the laser swords. The solution strengthens the overall experience of the site and strengthens the brand.
The Burger Menu by Peter Twauri is a beautifully illustrated version of the icon. The key feature of this badge is the choice of colors that mimic a cut bun and meat cutlet.
The series has various variants of hamburgers, which are realized with a line style. Here you will find a double hamburger, a cheese and salad hamburger, an open sandwich and a few others. Finding the perfect solution for your neat, flat interface will be easy to add spice and flavor.
The artist showcases three fun versions of the button: the classic hamburger, cheeseburger, and hot dog. Each is based on one or two colors, making it suitable for a variety of tiny interfaces. Here, the color creates the right kind of sandwich.
The artist offers a small animation that includes only one menu icon, and several smooth transitions that accompany the conversion to a regular "X" (close button). There are special effects that occur when the mouse is moved or pressed.
Unlike most of the examples above, this sample demonstrates skillful manipulation of weight rather than color. The top and bottom lines are bolder than the middle and create the right hamburger look. The artist has successfully coped with the task.
The ninja icon animation menu by Andrew Kovardakov differs from most hamburger buttons, and offers an interesting and uncommon solution, with a mysterious and attractive subtext. Here, each line is a vector ninja.
And this icon is an illustration of a salad and cheese burger. It can add flavor to any boring interface. An excellent solution for a restaurant or cafe website.
This is the article where you can find some interesting reasoning about the trendy menu icon. It is marked with an image that shows three variations of the hamburger button. The first is a top-notch flat illustration, the second is a colored three-line icon, and the third is a monochromatic version of the second, which is the most popular choice among designers.
GIF shows smooth transitions between the initial state of this minimalistic and elegant icon and its final state. Since the animation starts from the bottom line, it is shorter than the others.
Liam Spradlin's hamburger menu looks like a set of school bookmarks for books. This implementation is bold and somewhat rough. Such an icon is immediately noticeable; however, it can be difficult to find a suitable environment for it.
So far we have looked at icons separately, but they work well with words, especially when the word is “Menu”. While this may seem like overkill, they look sophisticated together. The 1px ultra-thin lines used in this case fit together like puzzle pieces.
The project proves that a hamburger icon can look brighter and more attractive when framed. This is a great choice for small devices, where such an icon will be convenient for touch navigation.
The designer displays a simple, sleek three-line icon that undergoes various metamorphoses, turning into a cross or an arrow. Animation includes several solutions that can come in handy for any project.
Outcomes
At first glance, it might seem that such little things as the menu icon should not be given much attention. But if you show a little imagination, you can turn it into some kind of zest for your interface. Especially if developers start to play with its meaning and use artistic tricks to make it more unconventional and eye-catching.
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 as smooth animation as this animated gif.
Here's an example of what we'll 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 straightforward.
/ * 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 operation 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;) // Styles for the "open" state when the checkbox is selected #toggle: checked (// Any element that you want to style when opening the menu comes with a selector here ~ // Styles for opening the navigation menu, e.g. & ~ .nav ())
Making 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 achieve this transformation. We decided to do it as follows:
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; // Adding a width for the first line & : 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 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;))
Note that we've only placed the basic styles here for the navigation items that matter most. You can find the complete code on Github.
Create an open menu
To create an open menu, we need to restore 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 the "lines" in the 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 lines &: before (opacity: 0;))))
The magic is in the little things
If we look closer at the gif, we will see that all the menu items do not move at the same time, but in a checkerboard pattern. We can do this in CSS too! Basically, we need to select each element (with: nth-child) and set the transition-delay value to fade. This is definitely repetitive work. What if we have more items? Don't worry, we can do better with 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 stepping behavior for the closing animation. We need to calculate the $ delay slightly different for the opening animation to get the step back. Like this:
$ delay: ($ items - $ i) * $ transition-delay;
Conclusion
We're done with our quirky menu! We've also included some dummy elements like in an animated gif and you can see.
So, we've created a simple and functional CSS only menu. However, if you don't want to use the CSS toggle system, it can ideally be replaced with just a few lines of JavaScript without much effort.
We hope you enjoyed this tutorial and found it useful!
We have done only the layout so far.
5. Download the 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.
