Examples of hidden menus in web design

Source: Designmodo: Qin UEC Welcome to share the original to Bole headlines

Using navigation icons in web design the trend is forcing us to revisit the navigation menus, their location in the design, and their role in the user experience. While this philosophy does not weaken its significance and importance in navigation, it can create more creative space for designers and developers.

Depending on the project, the navigation icons are very different from one another, but most of them tend to use the popular, simple, three-line icons that fit the mobile side, which look pretty and feel more in almost any environment. This small icon can be used to hide the small menu, but also to hide the complex, large content of the menu.

If the opening process is coupled with dynamic features or subtle but appealing effects, this simple graphic can be optimized for design. In addition, it can be used not only for various types of navigation (clear communication information), but also to help solve the problem of responsiveness, and promote the integration with mobile websites.

Here are some of the website designs that use the hidden menus with navigation icons, all of which are fresh produce.

Ewebdesign

In this example, we can see a large number of image backgrounds and parallax effects. The menu icon is placed in the upper-right corner of the headline and opens with a very detailed navigation menu pointing to the other plates.

Sampedro

The combination of a prominent picture of the title bar and witty slogan can absolutely attract the user's attention. Hiding the navigation bar effectively shifts the center of gravity from the navigation bar to the complex background in an unobtrusive way.

Chapoleone

The chapoleone uses a gorgeous photo backdrop to reveal the luxury and sophistication of the experience. Here, if you use the integrated navigation bar will destroy the overall impact, so the upper left corner hidden in the small shape behind the sliding menu absolutely complement each other.

Maecia

Maecia brings curious people into his work through its seductive dynamic effects and beautiful backgrounds. In order not to confuse the visitors on the Internet, the homepage uses the hidden navigation bar which is opened by the mouse click.

We are Empire

We are empire proves that the minimalist design, which is based on classical tones and plenty of white space, can also have a gorgeous and inviting look. In this case, the hidden menu is a great complement to the overall look.

Brand Junkie

Beautiful round retro style logo is very grab attention, so that people can hardly forget at first sight. The navigation icon fits perfectly with the overall environment, even if you can't find it at first sight, and it takes a few seconds to get to your eyes.

Intelart

Intelart Beautiful Dark color home perfect use of the background and foreground contrast. Its top-left corner is seamlessly fitted with a burger button that responds beautifully to the logo and text, presenting a beautiful, picture-centric navigation bar.

Monograph

Monograph's navigation icons are not exactly like three-line buttons, but this interesting approach makes them an integral part of the overall environment and is perfectly integrated with other content.

Camp David Film

While the main navigation bar habitually occupies the title bar, the company team cleverly hides the level two navigation bar. The second level navigation bar allows users to further explore the site by category, saving a lot of space to display beautiful photos.

Michael Villeneuve

Michael Villeneuve has chosen the key to the simplicity of the very hand. It creates a wonderful and unique user experience by combining playful contour graphics, engaging small animations, and a crisp, solid color background.

Exit Film

Exit film uses a more fresh, centralized layout style in the trend of web design. Its burger button occupies a central location and is perfectly in harmony with unorthodox page arrangements.

La Ligne Rouge

The navigation icons here are designed to improve overall design and enhance impressions. The navigation buttons feature beautiful hockey sticks that echo each other's logo and are cleverly integrated into the home page.

Xander

With a full-screen scrolling display of chic images, viewers on the web will not feel bothered by the lack of a dominant navigation bar. The hidden menu here is a great choice.

Tannbach

Although using the Burger button is the mainstream, you can still go back to basics and hide the menu behind a simple drag-and-drop panel. Tannbach used this method. However, there is no lack of interaction and beauty in its approach. The beautiful picture and background of the homepage neatly accommodates part of the dynamic navigation elements, which can be said to be absolutely perfect.

Cofa Media

Cofa media attracts users through its interesting video background depicting the company's workflow. A slightly elongated burger button subtly shows the main navigation bar, which in turn occupies the entire screen and improves the user experience.

Alt_cph14

ALT_CPH14 has a unique look that absolutely captures people's attention. Its digital design matches many of the pulse-jamming effects, and the striking blue monochrome background creates a distinct impression. The simple original Burger button complements the overall theme.

Ball&claw

Ball&claw a wonderful home-improvement experience through beautiful graphics, a clever text system and a classic color scheme. The navigation icon is perfectly matched to the home page design, bringing a sense of nobility.

Hooch Creative

The homepage does not have any visual element to make its copy become the protagonist, occupies the first place. Slogans clearly have a huge visual weight in this environment. The menu icon also plays a part in the auxiliary function.

Sam Dallyn

Sam Dallyn succeeded in directing the user's attention to the work. Grid, the center layout is good, very good emphasis on visual elements. Everything looks beautiful, and even the unobtrusive little burger button on the left sidebar is matched with the design thread.

The first years of Bose

The homepage is neatly divided into two sections, which can be activated with a mouse click and contains a variety of animation control methods. The burger button is almost invisible to the naked eye, but it is also a key part of the overall work, which can be used as a directional marker for online readers.

Demodern

The Demodern features a unique navigation icon that contrasts with the video background. In addition, its lovely geometry allows the menu to be cleverly combined with the homepage design, giving the user a good sense of reading.

Conclusion

Navigation icons can complement and enhance the design of different websites. Whether it is to let users focus on the work of the portfolio, or copy-dominated general company website, it occupies a place.

Examples of hidden menus in web design