可折叠侧边栏/导航菜单

Question

I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one . It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.

<ul id="navbar">
  <li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-     hidden="true"></i></li>
  <li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
  <li class="title">Title</li>
</ul>

Answer 1

please have a look at the following solution based on your code using CSS3 translate :

HTML:

 <div class="sidebar">
   <p>
     This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
   </p>
</div>
<div class="content">
  <ul id="navbar">
  <li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
  <li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
  <li class="title">Title</li>
</ul>
  <div class="main">
    aaaaaaaaaa
  </div>
</div>

CSS:

  body {
  height: 100%;
  width: 100%;
  margin: 0px;
  font-family: sans-serif;
  overflow: hidden;
}

a {
  text-decoration: none;
}

.title {
  float: left;
  display: block;
  padding: 14px 16px;
}

#navbar {
  font-weight: bold;
  text-align: center;
  float: left;
  background-color: #333;
  color: white;
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}

.sidebar{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  color:red;

}

.slide{
    -webkit-transform: translate3d(25%,0,0);
}

.content{
  width:100%;
  height: 30em;
  position:absolute;
  left:0px;
  top:0px;
  background: white;
  -webkit-transition:all .2s linear;
}

.content .slide{
    -webkit-transform: translate3d(25%,0,0);
}

i{
  cursor: pointer;
}

JS:

$('i').click(function(){
    $('.content').toggleClass('slide');
});

JS Fiddle Demo