SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Not-So-Hidden Tutorials and Inspirations to Make Hidden Menus

May 4, 2015 by Christopher Jan Benitez

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

Pure CSS Off screen Navigation Menu

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

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions 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

How to Create a Responsive Navigation 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

10 sneaky examples of hidden website menus 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

Examples of Hidden Menus in Website Design 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

20 Website Examples with Hamburger Icon Design You ll Love Inspiration1

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

Filed Under: Design Tagged With: design shack, designmodo, econsultancy, hidden menu, hongkiat, sitepoint, web design ledger

Recent Posts

  • How to use a PDF file combiner to support a Web planner optimally
  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js

Archives

  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022