javascript - 可折叠的侧边栏/导航菜单

Question

我正在编写一个网站，上面有一个导航栏，左边有一个侧边栏。我想把这个 Fiddle进入这个one .它可以使用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>

Answer 1

请根据您使用 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