Working with Sidr Pluggin

Sidr Plugin is used to create menu responsive menus. This plugin can be used to create multiple menus, responsive menu, open.close programmatically. We will be using this plugin to create a menu on the side that can close when we resize the page, closing the menu by clicking outside the menu, using the menu as anchor points. I will provide the start files for you, if you do want to download the plugin by yourself just follow the link and press download.

You can learn more about the plugin here

You can also view the slides for using this pluggin here.

Download The Start Files

Get to Know the Code

The div is has an id of “sidr”, this div helps to combine the navigation together to create it responsive. Inside the div we can add our menu. To create a smooth scroll add the “smooth” class to each link. We need the link with the id”close-menu-button” to make the menu close when we press outside the menu. Div id”overlay” will be used to hide the menu. The a link with id”simple-menu” is used to create a toggle menu.

In the CSS we position the button to a fixed position and add the image to it. We also create a fixed position for the overlay.

Linking jQuery and Sidr JS and Menu Background

There are different menu color options available, you can create a dark, light, or bare menu. Give it a try and see which one you like more.

Close the Menu by Pressing Anywhere

Let’s start by adding a function to close the menu, whenever we press outside the menu. This step requires to .ready function and .click function.

Inside .ready function add displace: false for #simple-menu, and add close property inside .click function to create a closing position. Now your menu should should close on click.

Using Anchor Menu

Now we will work on creating a smooth scroll true our anchor points. Create a .click function for our smooth scroll.

Let’s add a variable to target our smooth scroll.

Adding a close property inside .click function to have the menu close after getting to the right section, creating an animate property, you can adjust the speed of the scroll, we will be using 700.

We need to add two more properties for a smooth open and close of the menu.

Closing the Menu on Resize

Now we will work on getting the menu to close during screen resing. We need to add the .resize function.

Add $.sidr(‘close’, ‘sidr’); inside the resize function. To complete this function, now if we go to our index.html we will have a closing manu during resizing of the window.

Combining and Fixing Code

We need to add two more properties for a smooth open and close of the menu. To the .ready function.

We can also make the code smaller and easier to read by adding the smooth scroll on .click function inside the .click function for overlay and close-menu-button.

You probably noticed that the menu disappears as soon as you slide down to a certain section of the page. To fix that issue we need to add position sticky to the .menu-button.

Full Code