<div id="MsTamvanSideNav" class="sidenav">

<div class="author-profile">
<div class="background"><img src="http://i.imgur.com/BcXH1BB.jpg"/></div>
<div class="author-avatar"><img src="http://i.imgur.com/jl2oRgY.png"/></div>
<span class="author-title">Teja Sukmana</span>
</div>
<div id="searching">
<form action="/search" method="get">
<input name="q" placeholder="Cari artikel..." type="text" title="Search
Content"/>
</form>
</div>
<span class="closebtn"><a href="javascript:void(0)" onclick="closeSideNav()"
title="Close Menu">&#x2715;</a></span>
<ul class="menu">
<li><a href="https://mastamvan.blogspot.com"><i class="fa fa-inbox" aria-
hidden="true"></i> Inbox</a></li>
<li><a href="https://mastamvan.blogspot.com"><i class="fa fa-paper-plane" aria-
hidden="true"></i> Outbox</a></li>
<li><a id="submenu-1" href="javascript:void(0)"
onclick="showresponddiv(this.id)"><i class="fa fa-thumb-tack" aria-
hidden="true"></i> Submenu1</a>
<ul id="opensubmenu-1" class="submenu" style="display: block;">
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-camera" aria-hidden="true"></i> Camera</a></li>
<li><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i>
Picture</a></li>
<li><a href="#"><i class="fa fa-video-camera" aria-hidden="true"></i>
Video</a></li>
<li><a id="submenu-2" href="javascript:void(0)"
onclick="showresponddiv(this.id)"><i class="fa fa-thumb-tack" aria-
hidden="true"></i> Submenu2</a>
<ul id="opensubmenu-2" class="submenu">
<li><a href="#">Submenu1</a></li>
<li><a href="#">Submenu2</a></li>
<li><a href="#">Submenu3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bug" aria-hidden="true"></i> Bug</a></li>
</ul>
<div class="sosmed" id="hidesosmed">
<span class="facebook"><a href="https://facebook.com/tejasukmana99"
title="Facebook"><i class="fa fa-facebook-square" aria-
hidden="true"></i></a></span>
<span class="twitter"><a href="https://twitter.com/teja_7x" title="Twitter"><i
class="fa fa-twitter-square" aria-hidden="true"></i></a></span>
<span class="google"><a href="#Google" title="Google"><i class="fa fa-google-plus-
square" aria-hidden="true"></i></a></span>
<span class="hidesosmed"><a href="javascript:void(0)"
onclick="document.getElementById('hidesosmed').style.display='none';return false;"
title="Close Social Media">&#x2715;</a></span>
</div>
</div>
<span class='showmenu' onclick="OpenSideNav()" title="Open Menu">&#9776;</span>
<script type="text/javascript">
//<![CDATA[
function OpenSideNav()
{document.getElementById("MsTamvanSideNav").style.display="block"}function
closeSideNav()
{document.getElementById("MsTamvanSideNav").style.display="none"}function
showresponddiv(e){var
n=e.replace("submenu-","opensubmenu-"),t=document.getElementById(n);current&&curren
t!=t&&(current.style.display="none"),"none"==t.style.display?
(t.style.display="block",current=t):t.style.display="none"}var current=null;
//]]>
</script>

https://mastamvan.blogspot.com/2017/04/sidebar-navigation-menu-responsive.html