jQuery Offcanvas not working in responsive web page

I wrote a custom jQuery Offcanvas by using this link for my responsive web page.
Here is my code:
jquery code:

$(document).ready(function () {
                        width: '80%',
                $('#menu').click(function() {

HTML code:

    <div id = "mainDiv" class = "container" style="padding:0px;width:100%;height:100%">

                <div id = "header">
                <div class="example-0">
                        <ul class="vertical-menu">
                            <li><a href="">Home</a></li>
                            <li><a href="">Blog</a></li>
                            <li><a href="">About</a></li>
                            <li><a href="">Whatever</a></li>
                            <li><a href="">You</a></li>
                            <li><a href="">Want</a></li>
                            <li><a href="">It has it's own scrollbar</a></li>
                            <li><a href="https://youtu.be/yetPcm9emWs" target="_blank">See a funny video</a></li>
                    <div id = "icons">

                        <div class="example-page-0">
                            <span id="menu" class = "menu"></span>
                        <span id = "back"></span>


I’ve given mainDiv as mainCanvas and #menu as toggler and example-0 as a div which must be loaded when toggler is initiated.
But it isn’t working. My JS and HTML codes are mixed up.

Source: html

Leave a Reply