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.
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
