Beautiful menu burger on CSS. Fast creation "Hamburger" menu on jQuery

From Vitaly Rubtsova and could not resist to implement it.

In this lesson, I will tell you how to make this with one CSS, without any use of JavaScript. So, we will see some CSS (and SCSS) tricks, which will allow us to achieve almost the same smooth animation as this animated GIF.

Here is an example of what we will do:

Marking

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

Initial styles SCSS

Now add some basic styles to get the desired appearance. The code is quite 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;)

Work switch

Before you start creating the rest of the interface, add the switch operation to easily move from one state to another.

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

// hide Chekbox #Toggle (Display: None;) // Styles for "open" status when Chekbox is selected #Toggle: Checked (// Any item whose style you need to change when the menu is opening, goes here with the selector ~ // Styles to open the navigation menu, for example & ~ .nav ())

Creating a closed state

To make a closed state, we need to convert menu items in the line to get the Hamburger icon. There are several ways to obtain such a transformation. We decided to do this as follows:

And here is the code that it realizes.

$ transition-duration: 0.5s; // Display of navigation items in the form of lines that make up the Hamburger icon .Nav-Item (Position: Relative; Display: inline-block; Float: Left; Clear: Both; Color: Transparent; font-size: 14px; Letter-Spaction: - 6.2px; Height: 7px; Line-Height: 7px; Text-Transform: UpperCase; White-Space: Nowrap; Transform: Scaley (0.2); Transition: $ transition-duration, Opacity 1S; // Adding width for the first line & : nth-child (1) (letter-space: -8px;) // Adding a width for the second line &: NTH-Child (2) (Letter-Spaction: -7px;) // Settings for items starting from the fourth & : NTH-child (N + 4) (Letter-Spaction: -8px; margin-top: -7px; opacity: 0;) // Getting lines for Hamburger &: Before: 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 main styles for navigation items that are most important. You can find a full code on GitHub.

Creating an open menu

To create open menuWe need to restore navigation items from the lines to normal 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 Points from 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;))))

Magic in small things

If we look closer on the GIF, we will see that all menu items are moving at the same time, but in a checker order. We can make it in CSS! In principle, we need to select each element (using: NTH-Child) and set a gradual increase in the value of transition-delay. This is definitely a recurring job. And what if we have more items? Do not worry, we can do 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: $ delay;))))

Please note that with the help of this code we will get the desired step-by-step behavior for closing animation. We need to calculate $ delay, a little different to the opening animation to get a back step transition. Like this:

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

Output

So we finished with our bizarre menu! We also included some fictitious elements as in an animated GIF, and you can see.

So, we have created a simple and functional menu only on CSS. However, if you do not want to use the CSS switching system, it can be perfectly replaced with several JavaScript lines without much effort.

We hope this lesson was like you and you found it useful!

We have done only a layout.

5. Download the JQuery-3.3.1.Min.js library

Connect to our HTML Document before the closing tag body. Two files, one of them is still empty.

6. Create an event on JS

We write the following code to the file script.js.

$ (Function () (
$ (". Menuburger"). ON ("Click", Function () (
$ (". Menu"). SlideToggle (200, Function () (
if ($ (this) .css ("display") \u003d\u003d\u003d "none") (
$ (this) .removeattr ("Style");
}
});
});
});

We will not disassemble in detail JS. Code, limit to only shared comments. I can advise, for those who are interested in programming on JS.

This line $ (". Menuburger"). ON ("Click", Function () ( tracks an event on the click on the element with the class .Menuburger.

$ (". Menu"). SlideToggle (200, Function () ( Here the function is applied to the menu slideToggle ()which alternately unfolds or folds, selected items on the 200 Milisecond page.

$ (this) .removeattr ("Style"); - removes out inline styles display: None;

Now click hamburger Menu The unfolding and folds, but there is a problem, when you turn the menu shifts down the main content of the site, and correctly, if it is on top of the content. At the same time suffers the speed of page load, especially on the mobile Internet.

6. Deploying the menu on top of the content

This problem is solved by positioning the menu.

Mostly CSS. Add code

Menu (
Position: relative;
}

In a media request: .Menu (
Background: #eee;
Position: Absolute;
}

Thereafter, hamburger Menu will unfold over the main content. So it should be.

Hamburger Menu on CSS

1. Disconnect and delete all scripts

2. Insert B. HTML File between tags div and uL Lock code

3. Replace tag div C class .Menuburger on the label

4. Tie iD Input. With attribute for label through #Menucss.

As a result, when clicking on the icon hamburger MenuA check mark appears in Chekbox.

5. Add a pseudo-class in the media request checked.

#Menucss: Checked (
Display: None;
}

This means that when clicking on the icon, the check mark is put in checkbox, but on the screen it is hidden, only the icon is visible. The idea is that if the checkbox is not marked, the menu is closed, and if it is marked with a check mark, the menu is deployed. Event with opening and closing the menu, suspended in what state is a checkbox.

6. Square input in CSS.

#Menucss (
Display: None;
}

7. Change the code in paragraph 5, see above in the article on the next

#Menucss: Checked + .Menu (
Display: Block;
}

If the link between label and input #Menucss. Noted by checkmark (Checked)The menu is deployed. That's all the magic hamburger Menu Works on pure CSS. And if you add it a smooth animation, then no difference with the menu on JS.You won't feel.

Try to reduce the browser and you will clearly see how it works. hamburger Menu on CSS

Output

Both Operating options. Menu on JS., let's say it is right, in terms of using the code. Menu on CSS. - this is the "crutch", a kind of "manifestation of ingenuity", well suited to those who do not want to understand JS. And it is going to apply it only on its projects. For sites to order any "crutches", I strongly recommend doing a layout, sharpened for further use JS., other specialists.

You probably have already been tired of reading articles and constantly listen to different discussions about the three short lines of the hamburger menu. Is it a bad reception in interface design? Or not bad? This post is not like that - it will not judge, good or bad this menu. The bottom line is that I consider it not the best design solution, one way or another. But the hamburger menu has its own strengthsEspecially when used in mobile design, in conditions of limited space. So what can we do? Just take a hamburger-menu that is what it is, despite all the flaws, and live on? Many sites and applications seem to accept this. And I think that it is capable of better.

And then there were two things that made me change their mind. First, I came across. This is an article that really helps understand the effects of using a hamburger menu. In particular, sites with such a menu tolerate a serious decrease in the involvement of users. An overview of such statistics just began to change my opinion.

The next incident happened when I watched a colleague trying to use a new web application in which it was just such a menu. It was a developer who is very familiar with the hamburger menu interface, but when it came to the use of the application for his needs, he asked loudly aloud: "How can I get there?". Consider, this is one of the most famous people I know, and he didn't even think about touching the Hamburger menu icon. If someone has so smart problems with navigation, what does this talk about a typical user? My opinion finally acquired a solid justification.

Search for solutions

Everything is enough about the causes of my unbelief due to a hamburger menu - it's time to talk about the decision. For a start, I studied the special advantages 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 put a lot of navigation items for a small icon.
• Accuracy: It goes in a pair to scalability, but still, not the same thing. Designers want to create laconic and neat designs, leaving enough space for the main content. The use of a hamburger-menu gives a feeling of visual simplicity, attractive for any designer.

And if you create an alternative to a hamburger menu, it must somehow solve problems related to him:

• Constability: It should be possible to easily find navigation elements, especially those who use the product for the first time.
• Involvement: The interface should give prompts and Fidbeck, explaining that the user can do with the product, and when it is appropriate to use certain opportunities.

Complex: Mobile

I decided to start with the most difficult problem and check if my decision was suitable for mobile designs. After thinking a mass of ideas, I came to the conclusion that the menu of the IOS tab panel is one of the best solutions for mobile interfaces. The mass of people tried to make the tab panel scrolling (so that more than five options) or add "more" to navigation - something like a plush, which has an extra room that will quickly fill the trash. Also, both of these options still do not fulfill the main requirement - a clearness, the visibility of all possibilities is absent. So what can be created with the tab menu to fix it?

My decision is to combine a hamburger and tab panel to a single approach. The result is the tab panel, which opens the set of options for each menu item.

I created a test application for assessing the productivity of the team to illustrate your approach in business. Using this method, the user can clearly see the basic functions and methods of using the product. And instead of falling asleep full list The menu items hidden behind the hamburger icon, the user is shown several options that belong to the tab to which he clicked. So navigation is easier to understand and digest, everything you need is always at hand, allows the user to see the application hierarchy.

Another plus of such a design is the ability to use contextual notifications. In the case of a hamburger menu, you have only one place to display such notifications. If you stick to the layout with the tab panel, you can produce tips for the user in any of the selected menu items.

Of course, the biggest victory of this approach is scalability. Yes, you are still limited to five categories, but it is good. Honestly, I think that any site can accommodate your options in five categories if the designer with the mind thinks out navigation. After all, in each of these categories, there may be five or six sub-paragraphs.
It turns out 30 possible navigation options without the sensation of overload for the user and without the occupation of the entire screen space.

Application to tablets

Integration of such a panel of tabs into tablets, as it is, looked strange. The tablets are much wider, and the use of the same UI as for mobile devicesIt also looked ridiculous as a teenager in the clothes, from which he had long grown. So I went to another way. Instead of placing the tab panel at the bottom, I placed it on the side. So it turned out more convenient in terms of using the screen space and looked very natural. In addition, many users hold the tablet at side, so this is just a target area for touching your fingers.

What about the desktop?

Get ready ... Retractable menu. Everything is true - try this approach to the desktop interface and you will encounter an indisputable reality: this option is not at all. The retractable menu was used for years, and almost any user (even your mom) knows how it works. In this, there is a charm of this approach - nothing new.

Full disclosure

I do not know how to call this thing. Deposit Raptor? Or Taburger (Tab "Tab" + Burger)? Moreover, I do not know if anyone created a similar solution earlier. Given the simplicity of such a menu, I can not allow the idea that I was first. I know that several applications use retractable menus on some tabs (for example, Tweetbot), but usually they are implemented as fast access Functions for advanced users, and not in order to build a 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 long invented. It is important whether it is the best, more creative solution for navigating compared to the hamburger menu. Stop talking to yourself "There is such a menu in this cool site, it means that it should be the best" or "everyone does it, that means that correct." The design deserves a better, more attentive approach.
Updates
Collin Ebergardt noted on Twitter that the same UI was implemented in Windows Phone. I am myself windows user Phone, and he is right. Although this type of interaction is used in Windows Phone only for the option "More" in the tab panel.

James Perich led another example on Twitter. Look at the Ahtabbarcontroller created by Arthur Chemmer.

Simple, functional, intuitive and memorable, like any road sign, Hamburger Icon has become a real trend last year, and an integral element of any modern website and mobile application design.

This simple icon simulates the appearance of the menu list, is ideal for devices with small screens and websites, where the visual side is important, and the navigation should stand aside. This is a very efficient and viable solution that meets the requirements of the modern world.

Like any other interface element, a hamburger icon can have some deviations from the original option based on the needs of each individual project.

Depending on the project and theme, the Hamburger icon can take various forms that complement the design or can become its independent, distinctive feature.

Today's collection includes 20 different variations Hamburger icons.

The Hamburger Icon from Designer Dave Games immediately gives a lot of warm energy. Cartoon style adds playfulness, and creates only the most positive emotions. You can use such an icon at most modern illustrated interfaces.

And Mat Walker developed this icon with ocean waves. It will excellently feel at various projects dedicated to the sea. Blue as the primary color and frame around make this icon exclusive.

Clean, bright and witty implementation will allow this design to work as a menu icon on culinary sites. In this case, the interface will receive a pleasant art highlight.

The designer offers 10 interesting versions of hamburger icons, which are made with a soul. The series covers various types of burgers: one with cheese, the other with bacon, the third with turkey, and many others. If you have a website or mobile appFast food restaurant, they will definitely be useful. They are so visually interesting that they can find a place in almost any topic.

And this project represents a realistic hamburger in the vector. The closure button is made in the form of a fried potato taking the form "x", with or without sauce. This is a creative solution that can add exotic in page design.

Official site Star Wars Includes an interesting humburger icon, which turns. Each line is divided into two parts so as to obtain a vector of reflection of light laser swords. Solution enhances overall impression From the site and strengthens the brand.

Burger Menu from Peter Tauri is a perfectly illustrated version of the icon. Key feature This icon is to choose colors that imitate the cut bun and meat kitlet.

The series has various versions of hamburgers that are implemented using line style. Here you will find a double hamburger, a hamburger with cheese and salad, an outdoor sandwich and some others. Find the perfect solution for your neat, flat interface will simply to add piquancy and "taste."

The artist demonstrates three funny versions of the button: Classic Hamburger, Cheeseburger and Hot Dog. The basis of each lies one or two colors, which makes it suitable for various tiny interfaces. Here the color creates the correct appearance of the sandwich.

The artist offers a small animation that includes only one menu icon, and several smooth transitions that accompany the conversion to the usual "X" (closing button). There are special effects that arise when hovering mouse or pressing.

Unlike most examples above, this sample demonstrates skillful manipulations with weight, not color. The upper and lower lines of the bolder than the average, and create the right view of the "hamburger". The artist successfully coped with the task.

Menu Animation of the ninja icon from Andrew Kowardakova differs from most of the buttons-hamburgers, and offers an interesting and outstanding solution, with a mysterious and attractive subtext. Here every line is a ninja in vector.

And this icon is an illustration of a burger with salad and cheese. This can add a highlight to any boring interface. Excellent solution for the site of the restaurant or cafe.

This is an article where you can find interesting arguments about the fashionable menu icon. It is marked with an image that shows the three options of the Hamburger button. The first is a first-class flat illustration, the second is the painted icon of three lines, and the third is the monochromatic version of the second sample is the most popular choice among designers.

GIF shows smooth transitions between initial state This minimalistic and elegant icon, and its final state. Since the animation begins from the bottom line, it is shorter than others.

Hamburger Menu from Liam Spratlin looks like a set of school bookmarks for books. This implementation is bold and somewhat rough. This icon is immediately noticeable, however, it may be difficult to find a suitable environment for it.

So far, we have considered icons separately, but they work well with words, especially when this word "Menu". Although it may seem unnecessary, together they look exquisitely. Ultra-thin lines of 1px wide, which are used in this case, are combined as part of the puzzle.

The project proves that the Hamburger icon may look brighter and attractive when it is imprisoned. This is a great choice for small deviceswhere such an icon will be convenient for sensory navigation.

The designer displays a simple, smooth icon of three lines, which is subjected to various metamorphoses, turning into a cross or arrow. Animation includes several solutions that can be useful for any projects.

RESULTS

At first glance, it may seem that such trifles as the menu icon should not pay much attention. But if you show a little fantasy, you can turn it into a kind of highlight of your interface. Especially if the developers begin to play with its meaning, and use artistic techniques to make it more unconventional and attracting attention.