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 () {
                $('.example-0').offcanvas({
                    mainCanvas:'#mainDiv',
                    css:{
                        width: '80%',
                    },
                });
                $('#menu').click(function() {
                    $('.example-0').offcanvas('toggle');
                });
            });  

HTML code:

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

                <div id = "header">
                <div class="example-0">
                    <nav>
                        <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>
                        </ul>
                    </nav>
                </div>
                    <div id = "icons">

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

                    </div>
</div>
</div> 

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