How to create an offscreen navigation?

Website navigation is a very important website element from the user experience perspective. It allows the user to search for relevant information. In this article I will try to to explain what you have to take into consideration while building your own website navigation. I will start with description of mobile version and move to desktop.

Requirements and what we want to achieve:

Our navigation is meant to work both on desktop and mobile devices on multiple modern browsers (FF, IE11, Edge, Chrome 60+, Safari 9+). Our navigation should stick to the top of the screen during the scroll movement of the page. It should be placed in position fixed both on desktop and mobile versions. To achieve the best possible performance with transition animation on mobile devices we aim at utilising hardware acceleration feature of the transition animation for smooth rendering of different elements.

Mobile navigation

By "mobile version" we mean the navigation visible for devices using <768px screen width with pixel ratio 1 (<768px CSS width). The navigation, just like mentioned above, should maintain position fixed. That means it should stay on top of the screen always on top of the content area. It also characterise itself with simplicity. We should maintain only 2 states of the navigation.

1. The navigation visible only in the top of the screen. The only visible elements are header, which is an anchor linking to the homepage, and main navigation button. The click or tap on the button moves us to second state of the navigation.
Thanks to this state the user can easily access and view different content sections of the website without scrolling and searching for links in the static navigation on top of the page. That is certainly useful when working with websites with a lot of content as the user maintains access to main sections of the website within 2-3 clicks on the screen. With this navigation we implement the three-click rule.

2. The second state displays the navigation open. The offscreen section of the navigation should cover the rest of the page displaying a navigation overlay on top of the website content. It should display the horizontal list of elements with possible sub-lists. One of the top corners should also display a close button (possible cross icon) that will close the navigation and move the navigation state to state one.

Please take a minute to see the result's codebase in the JSFiddle below:

Desktop navigation

By "desktop navigation" we mean the navigation visible for devices using >=768px screen width with pixel ratio 1 (>=768px CSS width). This version of the navigation, just like mobile one, should be a "sticky" navigation always visible to the users while scrolling the content down the page. This is a much simpler navigation version as it does not contain any hidden elements. Hence, there is no additional behavior that we have to add to our elements.

Please see below for the JSFiddle preview of such navigation. The elements in the navigation are positioned using display: flex rule that allows easy alignment of child elements in a wrapper both vertically and horizontally.







What's more, please note that the height of the whole navigation element is "5rem". That means that it is 5 * the height of root element font-size (14px in our example). This allows us to position the content below the navigation with just the same rule i.e. "top: 5rem" and "padding-top: 2rem" for extra space. This way if we changed the root "font-size" from 14px to 20px the navigation height will change and the content will still be nicely visible below it.

Just a few lines of code

In the example above you can see how easy it is to create a mobile and desktop navigation with just a few lines of code. You do not have to use, sometimes, expensive plugins on the website you create. Basic understanding of HTML, CSS, and JavaScript is good enough for you to start the development.

References:
- https://mydevice.io/devices/
- Three click rule - https://articles.uie.com/three_click_rule/
- Fixed navigation Bars: Cons and Pros - Zach Ruthenford - https://www.awwwards.com/fixed-navigation-bars-pros-and-cons.html