In this tutorial, We will learn jquery responsive jside menu with drop down menus. We will talk about the jquery jside menu plugin. 


jSide menu is a responsive, responsive, cross-platform, mobile-friendly off-canvas navigation system built with HTML5, CSS3, and JavaScript (jQuery). 


Example:

<!DOCTYPE html>
<html lang="en"> 
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" />
        <title> JQuery Responsive Side Menu with Dropdowns - jSide Menu </title>
        <!-- Google Font -->
        <link href="https://fonts.googleapis.com/css?family=Questrial&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://codehimblog.github.io/jquery-jside-menu/css/jside-menu.css">
    </head>
    <body>
        <!-- Start jside Menu -->
        <menu class="menubar">
            <menuitem>
            <button class="menu-trigger"> <i class="material-icons">menu</i> </button>
            </menuitem>
            <menuitem class="logo" title="Your Logo Goes Here">
            <a href="#1"><img src="https://codehimblog.github.io/jquery-jside-menu/img/jside-menu.png" alt="jSide Menu" /> </a>
            </menuitem>
        </menu>
        <div class="menu-body visibility">
            <div class="menu-head">
                <span class="layer">
                    <div class="col">
                        <div class="row for-name">
                            <h3 title="User Name"> Logo </h3>
                            <span class="tagline"> Blog, Tutorial</span>
                        </div>
                    </div> <!--//col-->
                </span>
            </div> <!--//menu-head-->
            <nav class="menu-container">
                <ul class="menu-items">
                    <li><a href="#1"> <i class="material-icons">widgets</i>  Main item one </a></li> 
                    <li><a href="#1"> <i class="material-icons">bar_chart</i> Main item two </a></li>
                    <li class="has-sub"> <span class="dropdown-heading"> <i class="material-icons">collections</i> Item three with dropdown </span> 
                        <ul> 
                            <li> <a href="#2">dropdown sub item 1 </a> </li>
                            <li> <a href="#2"> dropdown sub item 2 </a> </li>
                        </ul> 
                    </li>
                    <li class="has-sub"> <span class="dropdown-heading"> <i class="material-icons">camera</i>  Item four with dropdown </span> 
                        <ul> 
                            <li> <a href="#2">sub item 1 </a> </li>
                        </ul> 
                    </li>
                    <li> <a href="#1">  <i class="material-icons">color_lens</i>  Main item four </a></li> 
                    <li> <a href="#1">  <i class="material-icons">pie_chart</i>  Main item five </a></li> 
                    <li>  <a href="#1">  <i class="material-icons">highlight</i> Main item five </a></li> 
                    <li> <a href="#1"> <i class="material-icons">format_size</i>  Main item six </a></li> 
                </ul>
            </nav>
        </div>
        
      
        <main>
            <article>
                <h3>Main Content</h3>
            </article>
        </main>
        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://codehimblog.github.io/jquery-jside-menu/js/jquery.jside.menu.js"></script>
        <script>
            $(function () {
                $(".menu-container").jSideMenu({
                    jSidePosition: "position-left", //possible options position-left or position-right
                    jSideSticky: true, // menubar will be fixed on top, false to set static
                    jSideSkin: "default-skin", // to apply custom skin, just put its name in this string
                });
            });
        </script>

    </body>
</html>


Output: