Hello everyone. With you Corvax. Today I want to continue the topic of the mobile menu and offer you to do but only using jQuery. 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; padding: 10px; margin: 0px auto;) .Menutoggle (Color: #FFF; Padding: 10px 15px; Cursor: Pointer; Display: None;) Body (Height: 100%;) @Media (Max-Width: 640px) (.Menutoggle (Display: None; Position: Absolute ; Background: # 3E2597; width: 100%; margin-left: -10px; padding-left: 10px;) .Menu Li (Float: None;))Adding JS.
After we glue the menu itself, we need to connect the JS file and proceed to the most interesting.
$ (Function () ($ ("Menutoggle"). ON ("CLICK", FUNCTION () ($ (". MENU"). SlideToggle (300, FUNCTION () (IF ($ (this) .css (" Display ") \u003d\u003d\u003d" None ") ($ (this) .RemoveAttr (" Style ");)));));));
Let's look at what is written here. At the beginning, we hinder Sobyti.on on clicking on the "Menu" button. In the inssence of this event, we do $ (". Menu") the menu that pays the SlideToggle () function that will produce a smooth opening and closing the menu.
There is a small problem that will have when you pass the site versions and the hiring on the "Menu" button, namely the block with the menu items themselves. By default, the SlideToggle () function when closing adds Atrebut "Display: None". To correct this bug, you need to call the SCHAKE (the function that will be called after the main function is working) for the SlideToggle () function. In Nutri Kolball, we write a condition. If we have an attribute in the menu block is "Display: None" then we remove the "Style" etribut.
Conclusion
This is how reports simply and quickly we created an adaptive menu "Hamburger" that you can lecturally use in multi projects. You can download source. With you was Corvax. Yes new meetings!
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 strengths, especially 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 one of small peopleI know, and he did not 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 it:
- 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 whether my solution will suit mobile designs. After thinking about the mass of ideas, I came to the conclusion that the tab menu of the IOS tab is one of best decisions 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 mimics appearance 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 of 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.
Designer offers 10. interesting versions 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. The solution strengthens the overall impression of 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. To find perfect solution For your neat, flat interface will be easy 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 the initial state of this minimalist 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.
