Example of a hidden menu in Web page design

How to use hidden menus in a Web page to enhance the overall design effect, let me tell you the following examples.

The trend of using navigation icons in web design is forcing us to revisit navigation menus, their location in design, and their role in the user experience. Although this concept does not weaken its navigational significance and importance, it can provide designers and developers with more creative space.

Depending on the project, the navigation icons are very different from each other, but most tend to use the three-line icons that are popular, simple, and fit on the moving end, which looks beautiful and feels better in almost any environment. This small icon can be used to hide small menus, but also to hide complex, content-heavy menus.

If the opening process is coupled with the dynamic function or subtle but attractive effect, then this simple and unsophisticated graphics can be optimized design. In addition, it can be used not only for various types of navigation (clearly conveyed information), but also to help solve the problem of responsiveness, and promote the integration with mobile Web sites.

Here are some of the use of hidden menus with navigation icons of the site design, 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

A prominent picture of the title bar and witty slogan, the combination of the two can absolutely attract the attention of the user. Hiding the navigation bar effectively moves the center of gravity from the navigation bar to the complex background in an unobtrusive way.

　　Chapoleone

Chapoleone uses a gorgeous photo background, revealing luxurious and exquisite feeling. Here if the integrated navigation bar will destroy the overall impact, so the upper left corner hidden in small graphics behind the slide out of the menu absolutely complement each other.

　　Maecia

Maecia has brought curious people into his work through its seductive dynamic effects and exquisite backgrounds. To keep the web's visitors from confusing, the homepage uses a hidden navigation bar that is hit by a single mouse click.

　　We are Empire

We are empire that the minimalist design based on classical tones and a large amount of white space can also have a gorgeous and seductive appearance. Here, the hidden menu is an excellent way to fill out the overall look.

　　Brand Junkie

The beautiful round retro style logo is very grabbing attention, making people hard to forget at first sight. Navigation icon and the overall environment perfect fit, even at the first sight can not find, it will take a few seconds to slowly come into view.

　　Intelart

Intelart Beautiful Dark Home The perfect use of the background and the foreground contrast. Its top left corner is seamlessly fitted with a burger button with a perfect response to the logo and text, presenting a beautifully designed navigation bar with a picture as its core.

　　Monograph

The monograph navigation icon is nothing like a custom three-line button, but this interesting approach makes it an integral part of the overall environment and is perfectly integrated with other content.

　　Camp David Film

Although the dominant navigation bar habitually occupies the position of the title bar, the company team subtly hides the level two navigation bar. Second-level navigation bar allows users to further explore the site through the classification, saving a lot of space to show beautiful photos.

　　Michael Villeneuve

Michael Villeneuve selected the key to the simplicity of the hand. It creates a wonderful and unique user experience by combining playful contour graphics, attractive small animations, and concise, solid colored backgrounds.

　　Exit Film

Exit film adopts a new style of centralized layout in the web design trend. Its burger button occupies a central position, perfect harmony with unorthodox page arrangements.

　　La ligne Rouge

The navigation icon here is designed to improve the overall design and enhance the impression. The navigation button uses the exquisite hockey stick, and the logo echoes each other, cleverly melts into the homepage page.

　　Xander

Through the full screen scrolling display of the unique pictures, online viewers will not be because of the lack of the main navigation bar and feel the trouble, not to be annoying. Hiding the menu here is an excellent choice.

　　Tannbach

Although using the burger button is mainstream, you can still go back to basics, hiding 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. Home beautiful pictures and backgrounds cleverly accommodated part of the dynamic navigation elements, it can be said that the perfect match.

　　Cofa Media

Cofa media attracts users with an interesting video background depicting the company's workflow. The slightly elongated hamburger button subtly displays the dominant navigation bar, which in turn occupies the entire screen and enhances the user experience.

　　Alt_cph14

ALT_CPH14 has a unique look that can definitely capture people's attention. Its digital design matches a lot of pulse jamming effects, plus a glaring blue monochrome background creates a vivid impression. The simple original Burger button complements the overall theme.

　　Ball&claw

Ball&claw through exquisite graphics, clever text system and classic color to show the wonderful feeling of home decoration. The navigation icon and the homepage design perfect collocation, brought a trace of nobility.

　　Hooch Creative

The homepage does not have any visual element to make its copywriting 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 assisting.

　　Sam Dallyn

Sam Dallyn successfully directed the user's attention to the work. Grid, center layout effect is good, good emphasis on visual elements. All the content looks beautiful, even the inconspicuous little burger button on the left side bar and the design line.

　　The Years of Bose

Home neatly divided into two sections, you can click to activate with a mouse, including a variety of animation control methods. The Hamburg button is almost invisible to the naked eye, but it is also the key part of the whole work, which can be used as the direction of the online readers.

　　Demodern

Demodern uses a unique navigation icon, which contrasts with the background of the video. In addition, its lovely geometry makes the menu and homepage Design Clever combination, to bring users 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-led general corporate web site, it occupies a place in it.

Original address: Uec.nq

　　from Novice to master, a designer how to experience the transformation in English, do in UEC Design English Classroom. Learn to design, learn English, improve moral integrity, revise the lower limit, English takes you zhuang bi take you to fly. Every Friday, immediately sweep the code!