Quickly create a hamburger menu using jQuery. Hamburger Icon: New Ways to Use Magic in the Little Things

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 simulates appearance 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. Series covers different kinds burgers: one with cheese, another with bacon, a third with turkey, and many others. If you have a website or mobile app dedicated to the restaurant fast food, 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.

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 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 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 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. 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.

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
• home
• Page 1
• Page2
• Page3

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: display: none; ) body( height: 100%; ) @media(max-width: 640px)( .menuToggle( display: block; ) .menu( display: none ; position: absolute; width: 100%; padding-left: 10px ) .menu li( float: none; ) )

After 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 information 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 has been 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.

Conclusion

So, 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!

We have only done the layout so far.

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

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

6. Create an event in JS

We write the following code in the script.js file
$(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 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:checked (
}

#menuCSS (

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

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 websites, there are no “crutches”; I strongly recommend making layouts tailored for further use of JS by other specialists.

You've probably seen on many websites 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.

Behind this button are hidden the navigation menu items; the idea is that at a certain screen width, by clicking on the icon, the user himself expands the menu if he needs it. If it is not necessary, then he immediately goes to viewing the content without being distracted by the menu, since it is hidden.

The active part of this task, namely expanding and collapsing hamburger menu items, can be implemented using JS using the jQuery library or pure CSS. Here I’ll immediately make a reservation that in CSS this is done in a “crutch way” on checkboxes, later I will explain what this is.

Hamburger menu in JS 1. Layout the usual top navigation menu with one paragraph of the content part of the site

Menu

• Creating an HTML Menu Layout


• Rates


• Products


• Services


• Contacts

Main site content

2. Insert a hamburger icon into the navigation menu

On the site iconfinder.com we find the desired icon, change the color to the desired one (Edit Icon), download it in SVG format, open it in the browser, copy the code from the web inspector.

Paste the code copied above instead of the "Menu" text.

Menu

At this stage, on desktop resolutions, the menu looks like this; we hid the SVG icon by writing the following code.

MenuBurger (
display: none; /* hamburger icon hidden */
}

3. Go to the media query

On a small screen width, from zero to 530 pixels. We need to do the opposite, show the hamburger menu icon and hide all menu items in a row.

@media screen and (max-width: 530px) (
.menu(
display: none; /* menu items are hidden */
background: #f1f2f4;
background: #eee;
}

Menu (
float: none; /* menu items in columns */
}

MenuBurger (
display: inline-block; /* hamburger icon visible */
}
}

4. Expand hamburger menu

What should you do before opening the hamburger menu? You need to temporarily comment out the CSS code of the media query /* display: none; */ and turn the horizontal menu into a vertical one. To do this, let's cancel the action of float and add the following code to the media query.