Removing the Slide

To make the menu appear with no slide animation, simply make changes to the CSS property transition, as shown in an abbreviated form below:

.sidenav {
transition: 0s;
}
#main {
transition: margin-left 0s;
}

This will make the change appear instantly as there is no delay specified in the transition. The default we used is 0.5s.

Conclusion

Creating a side menu only takes a few lines of code and does not need to use much resources. Also, if jQuery is already on the page for other tasks, the job can be made with slightly fewer lines of code and customised further.

Making the code responsive to work with different device screen resolutions is merely a case of modifying the CSS by adding media queries for the specific cases.

To take this further, you may wish to style your menu with a CSS framework such as Bootstrap or Bulma.