JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://rawgithub.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/adgsm/multi-level-push-menu/master/jquery.multilevelpushmenu.css">
<script src="http://oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">
<body>
    <div id="menu">
        <nav>
             <h2><i class="fa fa-reorder"></i>All Categories</h2>

            <ul>
                <li> <a href="#"><i class="fa fa-laptop"></i>Devices</a>

                     <h2><i class="fa fa-laptop"></i>Devices</h2>

                    <ul>
                        <li> <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>

                             <h2><i class="fa fa-phone"></i>Mobile Phones</h2>

                            <ul>
                                <li> <a href="#">Super Smart Phone</a>

                                </li>
                                <li> <a href="#">Thin Magic Mobile</a>

                                </li>
                                <li> <a href="#">Performance Crusher</a>

                                </li>
                                <li> <a href="#">Futuristic Experience</a>

                                </li>
                            </ul>
                        </li>
                        <li> <a href="#"><i class="fa fa-desktop"></i>Televisions</a>

                             <h2><i class="fa fa-desktop"></i>Televisions</h2>

                            <ul>
                                <li> <a href="#">Flat Super Screen</a>

                                </li>
                                <li> <a href="#">Gigantic LED</a>

                                </li>
                                <li> <a href="#">Power Eater</a>

                                </li>
                                <li> <a href="#">3D...

JavaScript

$(document).ready(function () {
    $('#menu').multilevelpushmenu({
        onMenuSwipe: function () {
            var e = arguments[0];
            if ($(e.target).prop('tagName').toLowerCase() == 'input') return false;
        }
    });
});