The hamburger menu is nothing new. You could say: “Oh, not this once more!” And you might be proper in some methods. Now we have mentioned this matter earlier than, exploring varied points reminiscent of The Hamburger & Mega-Menu Mixture Design Pattern or Analyzing the Hamburger Menu. So, it might appear to be we’ve mentioned all of it, or have we?
What else might be mentioned about one of the crucial mentioned matters in net design? Speculating about hamburger menu is like studying Harry Potter books. It seems like the whole lot about The Boy Who Lived and his adventures with associates attributable to all of the fuss and films. However if you truly bury your nostril within the books, you all of a sudden begin to learn by way of the strains and see tiny particulars. And it seems like you could have ignored one thing: One thing that’s essential.
The identical applies to the hamburger menu. With all of the articles on the market, we’re certain that we’ve left no stone unturned. Nevertheless, we’ve simply correctly scratched the floor. Let’s dive a bit deeper and focus our consideration on tiny particulars like a transition between the three-line icon and menu itself. It takes only a second or two, however as , the main points make the entire distinction – even the smallest ones. And this little impact can drastically add to the general impression, simply taking it to the subsequent degree.
The Internet Designer Toolbox
Limitless Downloads: 500,000+ Internet Templates, Themes, Plugins & Design Property
Traditionally, the transition between the 2 states of the hamburger menu is a sliding impact. Gismo is a traditional instance of that. Right here, the part with hyperlinks easily falls from the highest, occupying all the display screen. Appears to be like fairly, however nothing particular.
Fishfinger Artistic Company / 6tematik
Nevertheless, nobody stops you from constructing on this strategy thereby reviving a damaged document. As an example, the group behind the Fishfinger Artistic Company tries to make the transition a bit bit attention-grabbing by smoothing angles and utilizing a round form to match the general bubbly aesthetics.
And, 6tematik company splits the transition into two sections – forcing every a part of the navigation to come back from the alternative aspect and kind the frequent space. Consequently, not solely does this easy concept give a bit zest to the expertise, however it naturally attracts the eye in the direction of the guts of the web page the place menu hyperlinks lie.
IGOODI / We Nearly Are / Digital Designer / Senshu Advert Creators / Wizardry / Blab Studio
There are much more thrilling and attention-grabbing examples on the market. Firstly, there are results with boxy aesthetics that really feel probably the most pure.
With IGOODI, it seems like you take a visit down a reminiscence lane. After all, the web site is filled with high-end options that give the positioning a contemporary look. However, the transitions and results definitely have an old-but-inspiring Flash high quality. There are even sound results on mouse hover.
We Nearly Are additionally goes for some oldie-but-goodie vibes. The group imitates an impact that might be seen within the outdated boob tubes. Right here an image seems and disappears from the small dot within the heart. The answer can be spiced up with recognizable TV noise and distortion, making the whole lot look unbelievable.
The group behind Digital Designer took their inspiration from a traditional horizontal window jalousie. The overlay display screen is damaged into three vast stripes which are spiced up with a vertical block reveal impact. The group managed to provide a transition between two states an enthralling and, most significantly, eye-catching look.
In case you appreciated the earlier concept, however you need to rotate it 90 levels, then you’ll undoubtedly admire Senshu Advert Creators’ strategy. The company web site of this artistic Tokyo-based company additionally options the jalousie impact. However, this time the shutters are vertical and open and shut throughout the horizontal axis.
The group of the Wizardry company wins over purchasers with a incredible, well-though-out cosmic theme jazzed up with superior options. So, it isn’t stunning that some techy vibes additionally mark the transition for his or her menu, predictably hidden behind the hamburger button. Though the answer is predicated on a sliding impact, it definitely stands out from the group and completely contributes to the theme.
Blab Studio makes use of some type of an origami impact. Every block of their navigation display screen progressively and coherently opens in a boxy approach, triggering the subsequent space. Whether or not you open or shut the menu, the whole lot begins from the left backside sq. that represents a menu icon and strikes progressively to the correct high nook, recreating a sense of concord and consistency. The general design is predicated on squares and rectangles, so the boxy aesthetic is a perfect choice right here.
Ruya Digital / Bebold / Die ANTWORT
Let’s step apart from the sharp and edgy boxy options and contemplate some clean and fancy inventive approaches that may be seen in Ruya Digital, Bebold and Die ANTWORT. The entire corresponding groups managed to instill an inventive contact to the transitions, having taken inspiration from water splashes and paints.
The principle menu in Ruya Digital opens with an accompanying splash-like impact that falls from the highest. It has a particular gradient background that can be seen within the mouse hover impact. The transition easily modifications the scene, naturally grabbing a customer’s consideration.
Very similar to the earlier instance, the group of Bebold opts in favor of the identical impact. It’s paying homage to a watercolor portray, shortly operating down the shiny floor of the display screen. This time, the group provides vibrancy to the conclusion by utilizing pale blue, neon inexperienced and mild pink put collectively into lovely gradients. A number of layers go one-after-another, recreating a stunning dimensional feeling.
Die ANTWORT’s resolution was additionally borrowed from the artwork world. The transition is a small animation the place the black drop of paint was carelessly thrown down. It opens the navigation part. Not solely does the answer produce a profound impact, however it additionally goes properly with the whole lot else on the web site. It serves as a logical transition between the homepage and foremost menu space.
The Particulars Matter
Prefer it or not, in majority instances the boxy construction of a web site’s format influences the selection of the results. For sure, the block reveal impact and boxy aesthetics that may be seen in Blab Studio or Wizardry look nice and even really feel extra pure to us. Nevertheless, inventive approaches like in case of Bebold and Die ANTWORT at all times stand out amongst the competitors and seize consideration.
The essential factor is that you simply listen even to the smallest particulars like these groups did. Give a banal hamburger menu a breath of contemporary air by utilizing uncommon transitions that can catch a watch and enrich the impression.