Side Out Menu – Sidr Off Canvas Menu for WordPress

 In WordPress Theme Development

Side Out Menu - Sidr Off Canvas Menu for WordPress

 

Side Out Menu – Sidr Off Canvas Menu for WordPress

Sidr is a jQuery side out menu that can slide content from the left or right into the viewport. The tutorial bellow will help you to get it up and running in a WordPress theme.

The first step is to download the latest Sidr version which contains a jQuery file and 2 CSS styles, dark and light.

Download Sidr

Setting up the jQuery and CSS Files

From the downloaded Sidr zip find the jquery.sidr.js and the 2 CSS stylesheets jquery.sidr.light.css and jquery.sidr.dark.css.

Side out menu wordpress

Add the .js file to your theme js directory and do the same to the .css files.

On your theme directory open the functions.php file and add the follow code snippet

 

On the code above we have enqueued the js file ( jquery.sidr and sidr-yourscritp.js) on theme functions file, both files are set to load in the footer. For the CSS file I have added the dark style, but you can change the styling has much as you want.

 

Create .js file and named sidr-yourscritp.js copy the code bellow to your js file save it and add it to your theme’s js directory

 

The code above is target the element with an id of #nav-toggle and bind it to the slide outsidr on the right. All thats left to do is add in the HTML link toggle.

 

<div id=mobile-icon>
 <a id=nav-toggle href=#sidr>MENU</a>
  </div>

 

 

Set up the Content in the slideout

In order to have content on the menu we will need to add the source on our js file (sidr-yourscritp.js) . On the js file (sidr-yourscritp.js)  we can find  a value for source this is where we add the content and it can be multiple elements such as a menu, search, social media icons etc, you add these in as CSS selectors comma separated, with single quotes around the whole string

 

What is left is a few tweaks on css styling.
Side Out Menu

Media Queries

You can hide the menu at a certain viewport – I have the toggle link wrapped in a div – #mobile-icon, just display that at a certain size by changing the size and add in your style.css

 

 

The css above it will just hide the menu toggle and thus prevent it from opening, when it does display you will need to add in further CSS to hide the elements you are adding in the sidr from the actual page.

Doing it Left and Right

 

In the jQuery values you set a unique name and say which side right/left and you target another toggle link/HTML element and then add that HTML on the page.
That’s it – Thank you

Nuno Sarmento
I am full-stack WordPress developer based in London with a wealth of theme development and support experience. I am great at problem solving and developing quick solutions. I specialise in custom WordPress theme development and bug fixing.
Recommended Posts

Leave a Comment

Start typing and press Enter to search