Tiny Details: A Look at Hamburger Menu Reveal Transitions

The hamburger menu is nothing new. You may say: “Oh, not this again!” And you may be right in some ways. We have discussed this topic before, exploring various issues such as The Hamburger & Mega-Menu Combination Design Trend or Analyzing the Hamburger Menu. So, it may look like we have said it all, or have we?

What else can be said about one of the most discussed topics in web design? Speculating about hamburger menu is like reading Harry Potter books. It feels like you know everything about The Boy Who Lived and his adventures with friends due to all the fuss and movies. But when you actually bury your nose in the books, you suddenly start to read through the lines and notice tiny details. And it feels like you have overlooked something: Something that is important.

The same applies to the hamburger menu. With all the articles out there, we are sure that we have left no stone unturned. However, we have just properly scratched the surface. Let’s dive a bit deeper and focus our attention on tiny details like a transition between the three-line icon and menu itself. It takes just a second or two, but as you know, the details make the whole difference – even the smallest ones. And this little effect can drastically add to the overall impression, easily taking it to the next level.

Gismo

Historically, the transition between the two states of the hamburger menu is a sliding effect. Gismo is a classic example of that. Here, the section with links smoothly falls from the top, occupying the entire screen. Looks pretty, but nothing special.

Fishfinger Creative Agency / 6tematik

However, no one stops you from building on this approach thereby reviving a broken record. For instance, the team behind the Fishfinger Creative Agency tries to make the transition a little bit interesting by smoothing angles and using a circular shape to match the overall bubbly aesthetics.

And, 6tematik agency splits the transition into two sections – forcing each part of the navigation to come from the opposite side and form the common area. As a result, not only does this simple idea give a little zest to the experience, but it naturally draws the attention towards the heart of the page where menu links lie.

IGOODI / We Virtually Are / Digital Designer / Senshu Ad Creators / Wizardry / Blab Studio

There are even more exciting and eye-catching examples out there. First and foremost, there are effects with boxy aesthetics that feel the most natural.

With IGOODI, it feels like you are taking a trip down a memory lane. Of course, the website is packed with high-end features that give the site a modern look. Nevertheless, the transitions and effects certainly have an old-but-inspiring Flash quality. There are even sound effects on mouse hover.

We Virtually Are also goes for some oldie-but-goodie vibes. The team imitates an effect that could be seen in the old boob tubes. Here a picture appears and disappears from the small dot in the center. The solution is also spiced up with recognizable TV noise and distortion, making everything look incredible.

The team behind Digital Designer took their inspiration from a classic horizontal window jalousie. The overlay screen is broken into three wide stripes that are spiced up with a vertical block reveal effect. The team managed to give a transition between two states a charming and, most importantly, eye-catching appearance.

If you liked the previous idea, but you want to rotate it 90 degrees, then you will undoubtedly appreciate Senshu Ad Creators’ approach. The corporate website of this creative Tokyo-based agency also features the jalousie effect. But, this time the shutters are vertical and open and close across the horizontal axis.

The team of the Wizardry agency wins over clients with a fantastic, well-though-out cosmic theme jazzed up with advanced features. So, it is not surprising that some techy vibes also mark the transition for their menu, predictably hidden behind the hamburger button. Although the solution is based on a sliding effect, it certainly stands out from the crowd and perfectly contributes to the theme.

Blab Studio uses some kind of an origami effect. Each block of their navigation screen gradually and coherently opens in a boxy way, triggering the next area. Whether you open or close the menu, everything starts from the left bottom square that represents a menu icon and moves gradually to the right top corner, recreating a feeling of harmony and consistency. The overall design is based on squares and rectangles, so the boxy aesthetic is an ideal option here.

Ruya Digital / Bebold / Die ANTWORT

Let’s step aside from the sharp and edgy boxy solutions and consider some smooth and fancy artistic approaches that can be seen in Ruya Digital, Bebold and Die ANTWORT. All of the corresponding teams managed to instill an artistic touch to the transitions, having taken inspiration from water splashes and paints.

The main menu in Ruya Digital opens with an accompanying splash-like effect that falls from the top. It has a distinctive gradient background that is also seen in the mouse hover effect. The transition smoothly changes the scene, naturally grabbing a visitor’s attention.

Much like the previous example, the team of Bebold opts in favor of the same effect. It’s reminiscent of a watercolor painting, quickly running down the glossy surface of the screen. This time, the team adds vibrancy to the realization by using pale blue, neon green and gentle pink put together into beautiful gradients. Several layers go one-after-another, recreating a lovely dimensional feeling.

Die ANTWORT’s solution was also borrowed from the art world. The transition is a small animation where the black drop of paint was carelessly thrown down. It opens the navigation section. Not only does the solution produce a profound effect, but it also goes well with everything else on the website. It serves as a logical transition between the homepage and main menu area.

The Details Matter

Like it or not, in majority cases the boxy structure of a website’s layout influences the choice of the effects. Without a doubt, the block reveal effect and boxy aesthetics that can be seen in Blab Studio or Wizardry look great and even feel more natural to us. However, artistic approaches like in case of Bebold and Die ANTWORT always stand out amongst the competition and grab attention.

The important thing is that you pay attention even to the smallest details like those teams did. Give a banal hamburger menu a breath of fresh air by using unusual transitions that will catch an eye and enrich the impression.

The post Tiny Details: A Look at Hamburger Menu Reveal Transitions appeared first on Speckyboy Web Design Magazine.