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

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

1 个答案: