Javascript 可折叠侧栏/导航菜单

Javascript 可折叠侧栏/导航菜单,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在编写一个网站,上面有一个导航栏,左边有一个侧边栏。我想把这个变成这个。它可以使用CSS、JQuery、JavaScript和Bootstrap,当你点击图标时,边栏会拖到右边。当你再次点击它时,它会向左塌陷 <ul id="navbar"> <li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>

我正在编写一个网站,上面有一个导航栏,左边有一个侧边栏。我想把这个变成这个。它可以使用CSS、JQuery、JavaScript和Bootstrap,当你点击图标时,边栏会拖到右边。当你再次点击它时,它会向左塌陷

<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>
  • 标题

请使用CSS3
translate查看以下基于代码的解决方案:

HTML:

JS:

 <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>
  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;
}
$('i').click(function(){
    $('.content').toggleClass('slide');
});