Javascript 可折叠侧栏/导航菜单
我正在编写一个网站,上面有一个导航栏,左边有一个侧边栏。我想把这个变成这个。它可以使用CSS、JQuery、JavaScript和Bootstrap,当你点击图标时,边栏会拖到右边。当你再次点击它时,它会向左塌陷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>
<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>
请使用CSS3translate查看以下基于代码的解决方案:
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');
});