The use of hidden menus on website are becoming a common design practice for good reason. Now that “Mobilegeddon” is upon us, responsive design has taken more importance than ever. Much of the change in search results is not merely a preference, but it goes in line with how people consume their content online.
Using smartphones (80%) is the second most popular way to browse the Internet, behind the desktop (91%). Also, emails are opened using their mobile devices to as high as 70% of the time.
These glaring statistics show you the importance of accommodating your target audience with a website or content that can be accessible on their handheld devices. Setting up responsive design to your online properties will help you achieve this.
One of the elements observed in responsive design is the menu. Before, website menus are located at the header, just below the business logo or title. The menu options are laid out for visitors to browse and click on. While this design practices is still observed by some websites due to its clear hierarchy of content, it is by no means the most responsive.
When a website with a menu bar is viewed on a mobile device, the options are too small for visitors to read and click on. From a user experience perspective, it prevents visitors from seamlessly browsing through the pages of your site. While this is a small gripe (since you can zoom in to the links of a page from your mobile device to be able to read and click them), it still something that designers and website owners must improve upon to create a painless web experience to its visitors.
Enter hidden menus.
This design technique renders the navigational menu visible from its usual placement from your web page. Instead of being shown below the header, the menu is now hidden from plain sight. To show the options from your menu, you will need to find the hamburger or drawing looking icon on the page. Clicking it will unfold the menus for you to choose from.
This is advantageous when viewing a responsive website from your mobile device. You can simply press the icon to make the navigational menu collapse on the page. Pressing it again will compress the menu back to the icon so show you the page content.
The immediate benefit of create a hidden menu on your website, aside from usability, is the ability to maximize the elements found in your landing page above the fold. The purpose of landing pages is to increase the conversion rate of your call/s to action. By having an eye-catching navigational bar found at the bottom of the header, there’s a chance that it takes away the attention of visitors from the CTA buttons.
Creating a hidden menu for your website lets you display a flexible and responsive element for your website without the pain and hassle of over-stuffing it with code. If you wish to hide your navigational menu using this web design trend, click on the links below pointing to resources and design inspirations. These should help you gain a better understanding on how to create one for your site and the appropriate design to match your website branding.
Pure CSS Off-screen Navigation Menu
at SitePoint
Austin Wulk creates an off-screen navigational menu using HTML and CSS and not the usual jQuery plugins. The resource page breaks down the creation of the hidden menu starting with the basic structure (HTML) and then the CSS style for this specific page. The finished product is displayed on the page using CodePen, which allows other designers and front-end developers to tweak the code to their liking.
Create a Hidden Sliding Navigation Bar Using CSS3 Transitions
at Design Shack
If you don’t want your navigational menu to be clicked on for visitors to see the options there, this tutorial by Jake Rocheleau at Design Shack teaches you how to create a literally hidden menu. By following the instructions in the post using HTML and CSS, you can create a navigational menu on the page that’s hidden on the page. It only becomes visible to visitors when they hover the mouse cursor on the black header bar section of the page. Click here to see the demo.
How to Create a Responsive Navigation
by Hongkiat
Since the main idea of this post is to help you make their websites and blogs more mobile-friendly, this post teaches you how to create a responsive menu using HTML and the necessary CSS queries to achieve the desired appearance of the menu. It also teaches you alternative ways on how you can use jQuery plugins to create this type of menu.
10 sneaky examples of hidden website menus
by Econsultancy
Now that you’re aware on how to create a hidden and responsive menu, this page provides you with links to websites that makes great use of this design trend. Get ideas from the websites on how you plan on approaching the creation of your hidden menu.
Examples of Hidden Menus in Website Design
at Designmodo
If the 10 sneaky examples above didn’t get your creative juices flowing, then let’s up the ante by featuring 21 more design inspirations as featured in this post at Designmodo.
20 Website Examples with Hamburger Icon Design You’ll Love
by Web Designer Ledger
Whether you’re a hamburger lover or not (who doesn’t love hamburgers, anyway?), then you should nonetheless check out how the “hamburger icon” (the icon with three thick horizontal lines) is used by these websites to elegantly hide their respective navigational menus.
Final thoughts: From a user experience and search engine perspective, hidden menus are a logical addition to your design interface. If used correctly, they can help in not only increasing your search engine rankings, but also your conversion rate. The resources featured above should help you achieve both.
More on hidden menus:
Coding a Horizontal Navigation Bar with jQuery Dropdown Menus
40 Resources for Getting Started with jQuery Development
Author: Christopher Jan Benitez
Content marketer during the day. Heavy sleeper at night. Dreams of non-existent brass rings. Freelance writer for hire. Pro wrestling fan by choice (It’s still real to me, damnit!). Family man all the time.