The simple side panel navigation for small screen sizes using Jquery

Side panels are being used too much because they create a interactive user interface in small screens.However, Jquery Mobile also provides a side panel easy to use javascript library, but still for the sake of a simple panel no one wants to have a heavy loading scripts.That is why I am sharing a simple way to change the navigation into a side panel.

The panel have a button, due to which the panel get triggers As you can see in the demo below:

See the Pen Responsive Navigation Panel by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

But you must have to make sure that the side panel should be a sibling element of the container or else it might create a problem.

Secondly,the Jquery that I've used is based on the condition that if the button has class active then it will have the text as Close or else it text will be open.Finally you have to make sure that the width of the panel has been set to 30% which might need to change according to different screen sizes (As you need).