JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="http://amelisoft.com/test/demo/jquery.multilevelpushmenu.js"></script>
<link rel="stylesheet" href="http://amelisoft.com/test/demo/jquery.multilevelpushmenu.css">
<div class="row">
   <div class="container">
       <!--menu container start-->
       <div id="menu" class="col-md-4">
           <nav>
               <h2>Level-0</h2>
               <ul class="level-1 list">
                   
                   <li class="level-1">
                       <a title="show-1" href="#">Level-1</a>
                       <h2>Level-1</h2>
                       <ul class="level-2"><!--level-2 level-->
                           <li class="level-2">
                               <a title="show-2" href="#">Level-2</a>
                               <h2>Level-2</h2>
                               <ul class="level-3">
                                   <!--level-3 level-->
                                   <li class="level-3">
                                       <a title="show-3" href="#">Level-3</a>
                                       <h2>Level-3</h2>
                                   </li>
                               </ul>
                           </li>
                       </ul>
                   </li>

               </ul>
           </nav>
       </div>
       <!--menu container end-->
       <!--right content container start-->
       <div class="right-content col-md-8">
           <div class="content">
               <!--level-0 start-->
               <div class="wrap show-0 content-0">
                   <div class="typography">
                       <h1>Level-0</h1>
                       <p>
                           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus vulputate augue eget dapibus. Aliquam dolor...

CSS

#pushobj {
	position: absolute;
	top: 0px;
	left: 300px;
	color: #fff;
	background: #b9312f;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 2em;
}

.sub-menu {
    /*margin-left:40px;*/
    width:300px;
}

#menu {
    min-height:300px;
    font-size:15px;
}

.right-content {
    color:#666;
    overflow:visible;
}

/*right content*/
.right-content {
    height:400px;
    max-height:400px;
    overflow: hidden;
}


/*detail content*/
.detail h2 {
    font-weight:100;
}

.detail p {
    font-size:1.2em;
    line-height:1.4em;
}

.wrap {
    display: none;
}

JavaScript

$( '#menu' ).multilevelpushmenu({
		containersToPush: [$( '#pushobj' )],
		mode: 'cover',
        onGroupItemClick: function() {
            var $item = arguments[2];
            var id = $item.find( 'a:first' ).attr( 'title' );
            $(this).data('current', id);
            showContent(id);
        },
        onItemClick: function() {
            var $item = arguments[2];
            var id = $item.find( 'a:first' ).attr( 'title' );
            showContent(id);
        },
        onBackItemClick: function() {
            var id = parseInt($(this).data('current').replace('show-',''));
            id = 'show-'+(id-1);
            $(this).data('current', id);
            showContent(id);
        }
	});
    $('.show-0').show();

    function showContent(id) {
        $('.wrap').hide();
        $('.' + id).show(1000);
    }