Hamburger icon: new ways to use it. Quickly create a “hamburger” menu using jQuery Responsive menu with hamburger css
Hi all. Corvax is with you. Today I want to continue the topic of mobile menus and invite you to do it, but only using jQuery. Go.
Creating an HTML Menu Layout Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis autem consequatur eum facere neque. Tenetur laboriosam repellendus neque fuga, velit, totam, est, aspernatur sunt sapiente earum quo beatae. Fuga, officia. Adding basic CSS styles nav( background: #3e2597; padding: 0; margin: 0; ) .menu( list-style-type: none; padding: 0; margin: 0; ) .menu li( float: left; ) . menu li a( display: inline-block; padding: 10px 15px; color: #fff; text-decoration: none; ) .wrapper( max-width: 1024px; padding: 10px; margin: 0px auto; ) .menuToggle( color : #fff; padding: 10px 15px; cursor: pointer; display: none; ) body( height: 100%; ) @media(max-width: 640px)( .menuToggle( display: block; ) .menu( display: none ; position: absolute; background: #3e2597; width: 100%; margin-left: -10px; padding-left: 10px; ) .menu li( float: none; ) ) Adding JSAfter we have created the menu itself, we need to connect the JS file and proceed to the most interesting part.
$(function())( $(".menuToggle").on("click", function() ( $(".menu").slideToggle(300, function())( if($(this).css(" display") === "none")( $(this).removeAttr("style"); ) )); )); ));
Let's take a closer look at what is written here. At the beginning, we hang up the sobit.on by clicking on the “Menu” button itself. Inside this event, we add a slideToggle() function to the $(“.menu”) drop-down menu, which will smoothly open and close the drop-down menu.
There is a small problem that we will have when switching versions of the site and clicking on the “Menu” button, namely, the block with the menu items themselves will be hidden because By default, the slideToggle() function adds the attribute “display: none” when closing. To fix this bug, you need to call a callback (a function that will be called after the main function is processed) for the slideToggle() function. Inside the callback we write a condition. If we have an attribute in the menu block equal to “display: none” then we remove the “style” attribute.
ConclusionSo, very simply and quickly, we created an adaptive “hamburger” menu that you can easily use in your projects. you can download the sources. Corvax was with you. Yes, new meetings!
Simple, functional, intuitive and memorable, like any road sign, the hamburger icon became a real trend last year, and an integral element of any modern website and mobile application design.
This simple icon mimics the look of a menu list, ideal for small screen devices and websites where visuals are important and navigation needs to be kept to the side. This is a very effective and viable solution that meets the requirements of the modern world.
Like any other interface element, 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 on different forms that complement the design or can become its own distinctive feature.
Today's collection includes 20 different variations of the hamburger icon.
The hamburger icon from designer Dave Games immediately gives off 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 Mat Walker. She will feel great on various projects dedicated to the sea. The light blue as the main color and the border around it make this badge exclusive.
A clean, bright and witty implementation will allow this design to work as a menu icon on cooking sites. In this case, the interface will receive a pleasant artistic twist.
The designer offers 10 interesting versions of hamburger icons, which are made with soul. The series covers different types of burgers: one with cheese, another with bacon, another with turkey, and many others. If you have a website or mobile application dedicated to a fast food restaurant, then they will certainly come in handy. They are so visually interesting that they can find a place in almost any theme.
And this project represents a realistic hamburger in vector. The closing button is made in the form of French fries, taking the shape of an “X”, with or without sauce. This is a creative solution that can add exoticism to the page design.
The official Star Wars website includes an interesting hamburger icon that rotates. Each line is divided into two parts to obtain the reflection vector of the laser swords' light. The solution enhances the overall impression of the site and strengthens the brand.
Burger Menu by Peter Twaury is a beautifully illustrated version of the icon. The key feature of this icon is the choice of colors that mimic the cut bun and meat patty.
The series has various hamburger options, which are implemented using line style. Here you will find a double hamburger, a hamburger with cheese and lettuce, an open sandwich and several others. Finding the perfect solution for your neat, flat interface will be easy to add flavor and flair.
The artist demonstrates three fun versions of the button: a classic hamburger, a cheeseburger and a 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 look for the sandwich.
The artist offers a small animation that includes just one menu icon, and several smooth transitions that accompany the transformation into a regular "X" (close button). There are special effects that occur when you hover the mouse or click.
Unlike most of the examples above, this example shows skillful manipulation of weight rather than color. The top and bottom lines are bolder than the middle and create just the right "hamburger" look. The artist successfully completed the task.
Menu animation of the ninja icon from Andrew Kovardakov differs from most hamburger buttons, and offers an interesting and extraordinary solution, with a mysterious and attractive overtone. Here, each line is a ninja in a vector.
And this icon is an illustration of a burger with lettuce and cheese. It can add some zest to any boring interface. An excellent solution for a restaurant or cafe website.
This is an article where you can find interesting discussions about the trendy menu icon. It is marked with an image that shows three variations of the hamburger button. The first is a premium flat illustration, the second is a colored three line icon, and the third is a monochromatic version of the second design - the most popular choice among designers.
The GIF shows the smooth transitions between the initial state of this minimalist 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. This implementation is bold and somewhat crude. This icon is immediately noticeable, however, it can be difficult to find the right environment for it.
So far we have looked at icons separately, but they work well with words, especially when the word is “Menu”. While it may seem like overkill, they look sophisticated together. The ultra-thin 1px wide 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 an excellent 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 to become a cross or an arrow. Animation includes several solutions that can be useful for any project.
Results
At first glance, it may seem that such a small thing as a menu icon is not worth paying much attention to. But if you show a little imagination, you can turn it into some kind of highlight of your interface. Especially if developers start playing with its meaning, and use artistic techniques to make it more unconventional and eye-catching.
In which he proposed five alternatives to the “hamburger” menu for organizing navigation in a mobile application..
“If you work on digital products, you've probably read dozens of articles about how and why hamburger menus hurt the user experience on mobile devices by being confusing and ineffective. More and more projects are experimenting with alternative menu presentation options,” writes Zoltan Kollin.
The designer notes that none of the alternatives listed in the material is obviously more convenient or effective than others - they are all suitable for different situations.
1. TabsAs Colleen points out, tabs can be a useful solution if your mobile app has multiple main sections and users want to be able to quickly switch between those sections.
Developers often feel, Colleen continues, that tabs are one of the simplest navigation patterns. But when creating such a menu, you should adhere to several rules:
- There should be no more than five sections.
- One of the tabs (the active one) should be visually highlighted.
- The first tab should be “home”. Tabs should be arranged by priority or the order in which they are intended to be used.
- Tabs can be placed at the top or bottom of the screen, depending on the context and platform.
- You should only use icons instead of labels to indicate tabs if the user knows exactly what each icon means and if they are familiar with the possible actions (for example, they are suitable for social networking applications).
If your app has more than five main sections, Colleen suggests using a modified version of the first menu type - tabs with an "Other" option. In this case, the developer will be able to place four high-priority sections on the panel, and hide the rest in an additional tab.
“This may seem like no better option than a hamburger menu, but if you design the tabs so that almost all the information the user needs is in the first four sections, the UX won't suffer much,” Colleen explains.
Variation of tabs with the “Other” section - a menu that adapts to the screen size and shows a different number of tabs at each resolution. Those tabs that do not fit on the screen end up in the “Other” section.
“If you have several sections and you can’t identify the main ones, using tabs with an additional section may not be an effective solution. Then you can list all the items in the menu and make the panel scrollable,” writes Colleen.
The disadvantage of this solution, the designer notes, is that initially the user still only sees part of the tabs, and to view the rest, you need to scroll through the menu. However, if users are in an online store app with product categories listed in a panel, or in a news app with category tabs, this won't be an issue.
That said, designers should make sure it's clear to users how to scroll - and provide visual cues. For example, apply a “fading” effect to the last element.
5. Dropdown menuAccording to the designer, there is an interesting, but not the most common, template that is used when the visibility and accessibility of sections is not significant - a drop-down menu.
This menu serves as the title of the page the user is on. At the same time, the arrow next to the word lets the smartphone owner know that there are other sections that he can switch to. And although the options are hidden, it is clear to the user that they are either similar in importance to the open one, or are subsections of it.
Sometimes, Colleen notes, a hamburger menu can be a good solution. According to the designer, this pattern is not recommended for use when designing a primary menu, but it can be useful for secondary navigation functions. The “hamburger” can also be used when the user performs all the main actions on the main screen - for example, as in the Uber application.
We have only done the layout so far.
5. Download the jquery-3.3.1.min.js libraryWe connect two files to our HTML document before the closing body tag, one of them is still empty.
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 contentThis 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.
1. Disable and delete all scripts
2. Insert a line of code into the HTML file between the div and ul tags
3. Replace the div tag with the .menuBurger class with 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 (
display: none;
}
7. Change the code in point 5, see above in the article for the following
#menuCSS:checked + .menu (
display: block;
}
If the link between label and input #menuCSS is checked, then the menu is expanded. That’s all the magic, the hamburger menu works in pure CSS and if you add smooth animation to it, then you won’t feel any difference from the JS menu.
Try to make your browser smaller and you will clearly see how the CSS hamburger menu works
ConclusionBoth 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 websites, there are no “crutches”; I strongly recommend making layouts tailored for further use of JS by other specialists.
You are probably already tired of reading articles and constantly listening to various discussions about three short lines of the 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 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 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 just 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?” 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 so smart has trouble navigating, what does that say about the typical user? My opinion has finally acquired a solid foundation.
Finding a solutionThat'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 the 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.
I decided to start with the most difficult problem and see if my solution would work 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 being bombarded with a full list of menu items hidden behind a hamburger icon, the user is shown several options that relate to the tab they 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.
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.
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. This is the beauty of this approach - 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 typically designed as quick access to features for power users, not as a way to build up a 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'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 Perich gave another example on Twitter. Take a look at AHTabBarController created by Arthur Hemmer.