Using JS to realize the sidebar of life information network

effect ： Click the colored egg icon in the head navigation bar under the small screen to draw the side navigation bar from the left , Click on ‘ fork ’ Icon closes the side navigation bar .

effect ：

Code
1.html Code :

 <!--  Sidebar Click  -->
    <div class="sidenav" id="sidenav">
        <div class="colsesidenav glyphicon glyphicon-remove" id="colsesidenav"></div>
        <ul class="clearfix">
            <li> home page </li>
            <li> Journalism </li>
            <li> recommend </li>
            <li> Hot list </li>
            <li> parenting </li>
            <li> beauty </li>
            <li> plastic </li>
            <li> Keeping in good health </li>
        </ul>
    </div>

 <span class="hidden-lg hidden-md hidden-sm col-xs-2 sign" id="oversidenav">
    <h6 class="glyphicon glyphicon-th-list"></h6>
</span>

ps: The icon here uses bootstrap The Font Icon

css Code :

#sidenav {
    
  display: block;
  position: fixed;
  top: 0;
  left: -99rem;
  width: 70%;
  height: 100%;
  background-color: #fff;
  z-index: 5;
  transition: all 0.5s ease;
}
#sidenav #colsesidenav {
    
  position: relative;
  font-size: 0.533333rem;
  top: 0.9rem;
  left: 0.27rem;
}
#sidenav ul {
    
  width: 100%;
  top: 1rem;
  left: 0.36rem;
  position: relative;
}
#sidenav ul li {
    
  padding: 0.24rem 0;
  float: left;
  width: 90%;
  border-right: 1px solid #090;
}
#sidenav ul li:hover {
    
  color: #090;
}
@media screen and (min-width: 768px) {
    
  #sidenav {
    
    display: none;
  }
}

js Code :

 var oversidenav = document.getElementById('oversidenav');
    var sidenav = document.getElementById('sidenav');
    var colsesidenav = document.getElementById('colsesidenav');
    oversidenav.onclick = function() {
    
        sidenav.style.top = "0";
        sidenav.style.left = "0";
    }
    colsesidenav.onclick = function() {
    
        sidenav.style.top = "0";
        sidenav.style.left = "-99rem";
    }