From Vitaly Rubtsov, I couldn’t resist the desire to realize it.
In this tutorial, I'll show you how to do this using just CSS, without any use of JavaScript. So we'll see some CSS (and SCSS) tricks that will allow us to achieve animations almost as smooth as this animated gif.
Here's an example of what we'll be doing:
Marking
Let's start with the HTML structure we will be using. See comments for better understanding.
Starting SCSS Styles
Now let's add some basic styling to get the look we want. 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 ~ // Styles for opening a 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; ) // Add 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 an open menu, we need to restore the navigation items from lines to regular text links, as well as make a number of 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 have also included some dummy elements like in the animated gif and you can see.
So, we have created a simple and functional menu using only CSS. However, if you don't want to use the CSS toggle system, it can be perfectly replaced with a few lines of JavaScript without much effort.
We hope you enjoyed this tutorial and found it useful!
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 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 items hamburger menu can be implemented by means JS using the library jQuery or on clean CSS. Here I will immediately make a reservation that in CSS This is done in a “crutch way” on checkbox-ah, later I will explain what it is.
Hamburger menu in JS
1. Layout the usual top navigation menu with one paragraph of the content part of the site
Main site content
2. Insert a hamburger icon into the navigation menu
On the website iconfinder.com find the desired icon, change the color to the desired one (Edit Icon), download in format SVG, open it in the browser, copy the code from the web inspector.
Paste the code copied above instead of the "Menu" text.
At this stage, on desktop resolutions the menu looks like this: SVG We hid the 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 icon hamburger menu and hide all menu items in a row.
@media screen and (max-width: 530px) (
.menu (
display: none; /* menu items are hidden */
background: #f1f2f4;
position: absolute;
}
Menu (
float: none; /* menu items in columns */
}
MenuBurger (
display: inline-block; /* hamburger icon visible */
}
}
4. Expand hamburger menu
What to do before opening hamburger menu? It is necessary to temporarily comment out in CSS media query code /* display: none; */ and turn the horizontal menu into a vertical one. To do this, let's cancel the action float, add the following code to the media query.
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 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.
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 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.
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 wearing 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 such a 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.
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 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.
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. Let's go.
Creating an HTML Layout
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; 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%; padding-left: 10px; .menu li( float: none; )Adding JS
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 .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.
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!
