Last Updated:

Compact fixed menu for JS site

Beautiful navigation will help the user to more easily navigate the page and find the desired information, and therefore simplify the movement around the site, in today's lesson we will consider the process of creating a wonderful compact fixed menu for the site, which will appear in the lower right corner when scrolling through the page and will perfectly perform the functions assigned to it. We will decorate the menu with beautiful animations when expanding. Ease of development will help to install the menu without much effort.
 

Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:

 

Fixed navigation allows users to access the menu anytime they scroll through the page. This is less than the width of the fixed header and replaces the back-up button.

Step 1. HTML

The structure is simple: the navigation and its launch button are inside the #cd-nav div. The <SPAN> parameter inside the .cd-nav-trigger binding will be used to create the menu icon but only using CSS.

 

 

As you have seen for yourself, the markup is quite simple, and does not require much effort to add new elements for navigation. Let's move on to styles.

Compact fixed menu for JS site

Step 2. CSS

So we want the correct display starting from the mobile phone, we set position: fixed for an unordered list inside the navigation bar #cd-nav. We want the menu to be in the lower right corner for touchscreen devices, this will provide easy access even if you hold the phone with one hand. When the user clicks on the .cd-nav-trigger navigation button we set the .is-visible class to display an unordered list that changes the Scale CSS3 value from 0 to 1 – with a CSS3 transition to smooth out the transformation.

 

When the viewport is larger than 1170px, we change the navigation position from fixed to absolute. As the user scrolls down, we use jQuery and add an .is-fixed class to #cd-nav, thus moving all navigation to the bottom right of the screen — the same effect we use for touch devices.

@media only screen and (min-width: 1170px) {

 

Step 3. JS

We have determined the offset of the variable to switch the .is-fixed class:

 

 

The checkMenu() function responds to the smooth navigation behavior when scrolling:

 

 

As a result, we get an excellent, easy menu that will always be on the lead and please the visitor's eye when using it.